Reflow bei iPad und iPhone (Mobile Devices)

KasselJulian · 30.01.2013

Hallo,

ich möchte ein Template erstellen, das für Desktop und iPhone, iPad, Android etc. verschiedene CSS-StyleSheets anspricht.
Also, für iPhone und andere mobile Geräte soll es eine CSS-Datei geben und für den normalen Desktop UND iPad-Benutzer ebenfalls eine.
Mein bisheriger Code:

Code:

    <link rel="stylesheet" type="text/css" href="css/desktop_and_ipad.css" media="screen and (min-device-width:481px)" />
    <link rel="stylesheet" type="text/css" href="css/iphone_und_other_mobile_devices.css" media="@media only screen and (max-device-width:480px)" />

Das Problem: Das iPad fühlt sich als iPhone angesprochen und zeigt mir die mobile Version an. Diese sollte aber nur für iPhone und andere Mobile Telephones sein.

How can I realize this?

Danke

Myhar · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Wieso gibt es eigentlich so oft die versteifung auf "Ich brauch eigene Stile für iPhone/iPad, weil andere mobilde devices gibts ja gar nicht"? Und wenn apple mal auf die Idee kommt, neue Devices mit neuen Auflösungen herausbringt, läuft man denen dann auch nach? Was ist mit all den Android devices? Es kommen laufend neue Phones/Tablets mit unterschiedlichen Auflösungen heraus, will man die alle ignorieren?
Meiner Meinung nach ist es sinnvoller, sein CSS rein nach Auflösungen zu kategorisieren: So ist es egal, ob ein iPhone oder Android (oder Windows oder etc.) mit zB 400px Auflösung daherkommt.
Zuerst solltest du dir überlegen, bei welchen Größen dein Design "umbrechen" soll, sprich ein neues CSS sinn ergibt. Danach legst du die in deinem CSS fest, zB so:

HTML:

/*Hier alle global gültigen Styles rein*/

@media only screen and (max-width: 1200px){
/*Hier alle Styles, die bis 1200px gelten sollen
Styles, die in den globalen Styles definiert wurden, wirken hier natürlich auch!
*/
}

@media only screen and (max-width: 800px){
/*Hier alle Styles, die bis 800px gelten sollen
Styles, die in den globalen Styles und in max-width 1200px definiert wurden, wirken hier natürlich auch!
*/

}
@media only screen and (max-width: 480px){
/*Das selbe nochmal für 480px. Hier werden wieder nur die notwendigen Styles überschrieben*/
}

Damit brauchst du dir keine Gedanken um iPhone/Android/etc. machen, die devices stellen deine Seite einfach nach deinen Wünschen gemäß dar.

KasselJulian · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Myhar schrieb:
Wieso gibt es eigentlich so oft die versteifung auf "Ich brauch eigene Stile für iPhone/iPad, weil andere mobilde devices gibts ja gar nicht"? Und wenn apple mal auf die Idee kommt, neue Devices mit neuen Auflösungen herausbringt, läuft man denen dann auch nach? Was ist mit all den Android devices? Es kommen laufend neue Phones/Tablets mit unterschiedlichen Auflösungen heraus, will man die alle ignorieren?
Meiner Meinung nach ist es sinnvoller, sein CSS rein nach Auflösungen zu kategorisieren: So ist es egal, ob ein iPhone oder Android (oder Windows oder etc.) mit zB 400px Auflösung daherkommt.
Zuerst solltest du dir überlegen, bei welchen Größen dein Design "umbrechen" soll, sprich ein neues CSS sinn ergibt. Danach legst du die in deinem CSS fest, zB so:

HTML:

/*Hier alle global gültigen Styles rein*/ @media only screen and (max-width: 1200px){ /*Hier alle Styles, die bis 1200px gelten sollen Styles, die in den globalen Styles definiert wurden, wirken hier natürlich auch! */ } @media only screen and (max-width: 800px){ /*Hier alle Styles, die bis 800px gelten sollen Styles, die in den globalen Styles und in max-width 1200px definiert wurden, wirken hier natürlich auch! */ } @media only screen and (max-width: 480px){ /*Das selbe nochmal für 480px. Hier werden wieder nur die notwendigen Styles überschrieben*/ }

Damit brauchst du dir keine Gedanken um iPhone/Android/etc. machen, die devices stellen deine Seite einfach nach deinen Wünschen gemäß dar.

Hi,
danke für deine Antwort. Das versuche ich ja, nach Auflösungen zu kategorisieren, wie du vielleicht in meinem Code gesehen hast.
Ich möchte für alle Geräte die weniger als eine maximale Größe (Breite) von 480px haben, eine andere CSS-Datei ansprechen.
Wie würde mein Code dann geändert aussehen?

patrick_l · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Myhar schrieb:
Wieso gibt es eigentlich so oft die versteifung auf "Ich brauch eigene Stile für iPhone/iPad, weil andere mobilde devices gibts ja gar nicht"? [...]

Danke Myhar! +1

Myhar schrieb:
Meinung nach ist es sinnvoller, sein CSS rein nach Auflösungen zu kategorisieren: So ist es egal, ob ein iPhone oder Android (oder Windows oder etc.) mit zB 400px Auflösung daherkommt.

Daher ja auch mit "Media Queries" die Angaben Devices XY oder von X bis Y. Ich selber unterteile eigentlich auch nur in Smartphone, Tablet (+ orientation) und od. Desktop.

Edit:

KasselJulian schrieb:
Hi,
Wie würde mein Code dann geändert aussehen?

Hat Mayhar doch oben gepostet. :uhm:

Liebe Grüße, Patrick

Myhar · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

KasselJulian schrieb:
Das versuche ich ja, nach Auflösungen zu kategorisieren, wie du vielleicht in meinem Code gesehen hast.

Du kategorisierst nach der Auflösung des devices, nicht nach der eigentlichen Auflösung des Browsers. Browser auf Smartphones rendern Websites nämlich nicht mit der tatsächlichen Auflösung des Smartphones.
In meinem Beitrag habe ich schon die Lösung für deine Frage, wie du nach unterschiedlichen Browsergrößen trennst, gepostet. Ob du die Lösung jetzt in einem CSS zusammenfasst oder auf mehrere aufteilst, musst du selber entscheiden.
Allgemein finde ich eine unterteilung in Devicetypen (smartphone, tablet, desktop) nicht (mehr) als sinnvoll. Was ist, wenn sich smartphones mit der 4-fachen Auflösung als jetzt durchsetzen? Was ist, wenn mini-Tablets (wie iPad mini) sich durchsetzen? Was wenn...?

Ein paar gute Links zu diesem Thema:
http://www.lukew.com/ff/entry.asp?1649
http://alistapart.com/article/vexing-viewports#When:06:00:09Z

patrick_l · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Myhar schrieb:
Allgemein finde ich eine unterteilung in Devicetypen (smartphone, tablet, desktop) nicht (mehr) als sinnvoll. Was ist, wenn sich smartphones mit der 4-fachen Auflösung als jetzt durchsetzen? Was ist, wenn mini-Tablets (wie iPad mini) sich durchsetzen? Was wenn...?

Du hast ja recht damit. Allerdings deckt man ja mit den "von bis" Angaben die meisten oder das meiste der Devices ab. Wenn wir das jetzt noch weiter spinnen, könnte man es gleich wie mit den Vendor-Prefixes machen. Direkt Device XY ansprechen

Ich gehe noch ein Schritt weiter. Sehe schon Websites vor Augen, auf denen Stolz eine Liste aufgeführt wird, für welche Geräte den nun optimiert wurde. So wie man es schon für den IE und Co kannte. :lol:

Zurück zum Eigentlichen. Ich denke mit Device "von bis"und "orientation" ist man auf der "sicheren" Seite. Sollte sich dann doch im laufe der nächsten Monate/Jahre ändern, kann man ja ohne Probleme weitere MQ notieren.

Übrigens, danke für deine Links. Wenn ich nachher die Zeit habe, werde ich sie mir in ruhe durchlesen. Der Stoff soll ja hängen bleiben. Von wegen Halbwissen und so

Liebe Grüße, Patrick

KasselJulian · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Myhar schrieb:
Du kategorisierst nach der Auflösung des devices, nicht nach der eigentlichen Auflösung des Browsers. Browser auf Smartphones rendern Websites nämlich nicht mit der tatsächlichen Auflösung des Smartphones.
In meinem Beitrag habe ich schon die Lösung für deine Frage, wie du nach unterschiedlichen Browsergrößen trennst, gepostet. Ob du die Lösung jetzt in einem CSS zusammenfasst oder auf mehrere aufteilst, musst du selber entscheiden.
Allgemein finde ich eine unterteilung in Devicetypen (smartphone, tablet, desktop) nicht (mehr) als sinnvoll. Was ist, wenn sich smartphones mit der 4-fachen Auflösung als jetzt durchsetzen? Was ist, wenn mini-Tablets (wie iPad mini) sich durchsetzen? Was wenn...?
Ein paar gute Links zu diesem Thema:
http://www.lukew.com/ff/entry.asp?1649
http://alistapart.com/article/vexing-viewports#When:06:00:09Z

Folgendes Problem habe ich dabei:
Mein Computer fühlt sich bei @media only screen nicht angesprochen. Wenn ich es raus mache jedoch schon.
Was ist da los?

patrick_l · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

KasselJulian schrieb:
Folgendes Problem habe ich dabei:
Mein Computer fühlt sich bei @media only screen nicht angesprochen. Wenn ich es raus mache jedoch schon.

Du musst für deinen Desktop keine Media Queries verwenden bzw. würde ich sie da überhaupt nicht einsetzen. Nur für andere Devices, die dem nicht entsprechen. Ich orientiere dabei eigentlich immer an dem "Standard-Viewport" (968x576Px).

Code:

/*  --- Standard ---*/
* {bla: blub;}
/*  --- Devices ---*/
@media only X and X {bla:blub;}

Ich würde erst einmal dein Layout umsetzen, damit die eine gute Basis für alles weitere hast. Danach Schritt für Schritt die einzelnen Devices durchgehen. Ist meiner Meinung nach auch der schnellste Weg.

Myhar · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

patrick_l schrieb:
Du hast ja recht damit. Allerdings deckt man ja mit den "von bis" Angaben die meisten oder das meiste der Devices ab.

Mit von-bis deckt man nicht nur die Meisten, sondern alle devices ab. "The first media query is NO media query." Sprich, kann das device keine media-queries, bekommt es die standardversion serviert, ansosnten die angepasste.
Hat man mediaqueries für 300-600px, 601-800px, 801-1000px, 1001+px, dann kann es einem egal sein, ob HandyherstellerY in einem halben Jahr ein Smartphone mit 732px Breite herausbringt, es wird automatisch in den Bereich 601-800px fallen.
Das setzt natürlich alles voraus, dass die Seiten auch flexibel und nicht mit fixen Pixelbreiten umgesetzt werden. Bringt jetzt der Konkurrent von HandyherstellerY ein Smartphone mit 811px herau (mehr ist ja immer besser), dann kommt es eben automatisch in die 801-1000px Grenze. Da muss man keinen weiteren Mediaqueries notieren.
Deshalb verstehe ich nicht, wieso so Sachen wie zB orientation in mediaqueries verwendet werden? Es mag Situationen geben, wo die Sinn ergeben, aber für die meisten (ich denke 99%) der Seiten sind sie nicht notwendig.

@Julian: Dein Computer wird sich von keinem Mediaquery angesprochen fühlen, höchstens die Browser, welche du verwendest. Und auch hier kommt es auf den Browser an. Also: Welchen Browser verwendest du, wie schaut dein HTML/CSS aus? Ein "funktioniert nicht" ist nicht ausreichend

btw. noch ein interessanter Link bezüglich responsive

patrick_l · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Myhar schrieb:
Mit von-bis deckt man nicht nur die Meisten, sondern alle devices ab. "The first media query is NO media query." [...]

Das weiß ich ja. Habe mich da nur falsch ausgedrückt. Media Queries sind ja nicht anders als die Conditional Comments oder Vendor-Prefixes. Wird Browser / Device XY nicht damit angesprochen, passiert nichts bzw. wie du richtig geschrieben hast die Standardversion genommen.

Wellenbrecher1963 · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Leute, das mit den Media Queries ist ja der Hammer. Habe ich immer etwas stievmütterlich behandelt. Da sind ja Layouts damit möglich, man, da will ich gar nicht darüber nachdenken.

Äh Patrick, wie müßte die Querie aussehen, wenn ich die Anweisungen aus einer CSS Datei nachladen will? Ich fände das sehr elegant und übersichtlich, diese CSS Anweisungen dann auch jeweils in separate CSS Dateien zu verfrachten.

Danke schon jetzt für Deine Antwort.
l.G. Sylvio

Myhar · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Ich heiße nicht Patrick, aber du kannst trotzdem meine Antwort im ersten Beitrag herannehmen

Da steht schon drinnen, wie das CSS aussehen muss.
Falls du Infos für import Anweisungen im CSS suchst, auf der offiziellen w3c Seite gibt es leicht verständliche (ist dort ja nicht immer so ^^) Beispiele.

KasselJulian · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Also,
ich habe mir das hier jetzt gut durchgelesen und auch alles plausibel und schön, auf meine Lösung komme ich bisher aber nicht.


<link rel="stylesheet" type="text/css" href="css/styles.css" />

<link rel="stylesheet" type="text/css" href="css/iphone.css" media="@media only screen and (max-width: 480px)" />

Das iPad ignoriert, trotz dass es mehr als eine Breite von 480px hat, die iphone.css nicht!

Myhar · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Hast du auch den viewport meta-Tag eingebunden? Soweit ich weiß, braucht man den auch.

KasselJulian · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Myhar schrieb:
Hast du auch den viewport meta-Tag eingebunden? Soweit ich weiß, braucht man den auch.

Ja!

Code:

<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = yes">

Myhar · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Jetzt seh ich es... Meine geposteten Beispiele waren die korrekte Syntax für das direkte Einbinden in eine schon vorhandene CSS Datei. Möchtest du unterschiedliche CSS Dateien (und somit auch unterschiedliche link Tags), musst du dein media Attribut anpassen.
Nochmal der Link von vorhin, wo alle verschiedenen Varianten der Syntax erklärt werden.
In deinem Fall:

HTML:

<link rel="stylesheet" type="text/css" href="css/iphone.css" media="only screen and (max-width: 480px)" />

KasselJulian · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Myhar schrieb:
Jetzt seh ich es... Meine geposteten Beispiele waren die korrekte Syntax für das direkte Einbinden in eine schon vorhandene CSS Datei. Möchtest du unterschiedliche CSS Dateien (und somit auch unterschiedliche link Tags), musst du dein media Attribut anpassen.
Nochmal der Link von vorhin, wo alle verschiedenen Varianten der Syntax erklärt werden.
In deinem Fall:

HTML:

<link rel="stylesheet" type="text/css" href="css/iphone.css" media="only screen and (max-width: 480px)" />

Danke, für das iPhone vertikal trifft das zu! Horizontal jedoch, ignoriert das iPhone jetzt diese CSS-Angaben und richtet sich nach den Desktop/Tablet-Angaben.
Deshalb muss max-width: 480px sein.

Danke, Gruß

patrick_l · 30.01.2013

AW: Reflow bei iPad und iPhone (Mobile Devices)

Auch wenn du es jetzt hast, hier nochmal von mir die Links zum einbinden mehrerer CSS.

HTML:

<link rel="stylesheet" media="only screen and (min-width : 768px) and (max-width : 1024px)" href="assets/css/ipad.css">
  <link rel="stylesheet" media="only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait)" href="assets/css/ipad-portrait.css" >
  <link rel="stylesheet" media="only screen and (-webkit-min-pixel-ratio : 1.5), only screen and (min-pixel-ratio : 1.5)" href="assets/css/iphone.css" >
  <link rel="stylesheet" media="only screen and (min-width : 300px) and (max-width : 480px)" href="assets/css/smartphone.css" >

Ich schreibe aber in der Regel alles in ein CSS. Einzige Ausnahme wären Angaben für den IE, die ich mit Conditional Comments einbinde. Kommt aber eher selten vor.

Liebe Grüße, Patrick