akroll: Handheld und neustruckturierte Html

Hallo Ihr,
wie im Thema schon steht möchte ich in einer Handheld Version meine Seite machen.
Da der Content für meine Screen Version sich nicht für eine Handheld Version eignet dachte ich mir einfach einen neuen Container unterhalb meiner "normalen" Webseite zu machen und diese dann in der betreffenden Css auszuschalten.

beispiel:

  
<html>  
<head>bla</head>  
<body>  
<div id="container">  
Normaler Text für Screen Version. Normale Webseite  
</div>  
<div id="container2">  
Text für Handheld Version.  
</div>  
</html>  

Die Screen-Css dazu:

  
#container {  
width:1000px  
}  
#container2{  
display:none;  
}

In der Handheld Css:

  
#container {  
display:none;  
}  
#container2{  
width:300px;  
}  

Doch irgendwie funktioniert das nicht. Wenn ich mit einem iPhone drauf gehe macht der immer nur die Screen Css und somit den normalen Container, statt den Container2.

PS: ich habe meine Stylesheets wie hier verwendet (also mit core.css antiscreen.css usw..) http://www.alistapart.com/articles/return-of-the-mobile-stylesheet/

Kann mir jemand helfen?

  1. Grüße,
    OperaMobile zB lässt dich wählen, ob du die mobile oder normale Version sehen willst- by default ist es normale. ist es mit myPhone etvl ähnlich? jegliche OPtionen?
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth
  2. Doch irgendwie funktioniert das nicht. Wenn ich mit einem iPhone drauf gehe macht der immer nur die Screen Css und somit den normalen Container, statt den Container2.

    am iPhone läuft ein hundsgewöhnlicher Safari der sich nicht als Mobiles Endgerät outet - den muss man anders (wenn nötig) bedienen.

    btw: warum 2 Container?

    1. am iPhone läuft ein hundsgewöhnlicher Safari der sich nicht als Mobiles Endgerät outet - den muss man anders (wenn nötig) bedienen.

      btw: warum 2 Container?

      Ja, das iPhone versteht sich NICHT als Handheld. Man kann den aber trotzdem dazu bringen die Handheld css zu lesen. Siehe mein Link!

      Der zweite Container ist ja die Iphone Version der Webseite. Den Ersten Container (wo der Inhalt meiner normalen Webseite drinne ist) lösche ich ja in der Handheld css.
      Gleicherweise Lösche ich den Container2 (Iphoneversion) mit meiner Screen css.
      Ich hab praktisch zwei Webseitenversionen in EINER html.

      1. Ja, das iPhone versteht sich NICHT als Handheld. Man kann den aber trotzdem dazu bringen die Handheld css zu lesen. Siehe mein Link!

        Mit Media-Queries - ja.

        Der zweite Container ist ja die Iphone Version der Webseite. Den Ersten Container (wo der Inhalt meiner normalen Webseite drinne ist) lösche ich ja in der Handheld css.

        Nein, du blendest ihn nur aus - das ist ein essentieller Unterschied. Ausgeliefert wird dein Inhalt per HTTP aber dennoch.

        Gleicherweise Lösche ich den Container2 (Iphoneversion) mit meiner Screen css.

        Auch den löscht du nicht.

        Ich hab praktisch zwei Webseitenversionen in EINER html.

        Ja - und das ist Unsinn.

        Bitte ankreuzen:
        [ ] ich habe den ALA-Artikel nicht verstanden.
        [ ] ich habe CSS nicht verstanden.
        [ ] ich habe Medientypen nicht verstanden.
        [ ] ich habe HTML nicht verstanden.
        (Mehrfachnennung möglich)

  3. Es funzt!
    Mein Problem war, dass ich für die handheld.css, vergessen habe im media query  "handheld,..." zu zuweisen. Vorher stand nur "only screen and...".

    Also:
    <link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)" />
    statt:
    <link rel="stylesheet" href="handheld.css" media="only screen and (max-device-width:480px)" />

    handyheld, only .....

    Desweiteren gabs im Internet noch ne .htaccess Datei für ne automatische Weiterleitung:.
    RewriteEngine On
    RewriteCond %{HTTP_USER_AGENT} .*iPhone.*
    RewriteRule ^index.html$ http://www.bla.net/mobile/ [L]
    RewriteRule ^/$ http://www.bla.net/index.html [L]

    Interessant wäre jetzt nur noch wie ich andere Handhelds(Blackberry) anweisen kann dasgleiche zu tuen wie es das iPhone tut.