Media-Abfrage hat immer min. ein Problem...

[ChristianPons]

Hallo zusammen,

ich überarbeite gerade unsere Site und mache die Neue mit HTML5 und CSS3. Allerdings suche ich seit Tagen die Lösung für die richtige Konfiguration der Medien-Abfrage für diverse Anzeigegrößen. Ich möchte für folgende Situationen die entsprechenden CSS-Dateien laden:

Smartphone jeweils portrait und landscape
iPhone4 (Retina-Display) jeweils portrait und landscape
iPad jeweils portrait und landscape
Desktop klein (max width 899px)
Desktop groß (min width 900px)

Bei den Abfragen bekomme ich kein "sauberes" Ergebnis. Speziell das iPad landscape macht Probleme, da es bei der Definition:

@import url("iPad1 Landscape.css") only screen and (-webkit-min-device-width : 768px) and (-webkit-max-device-width : 1024px) and (orientation : landscape);

lieber auf die "Desktop groß" geht.

Lasse ich die Desktop klein weg und mache die Desktop groß ab 1025px wird bei kleinerem Browserfenster alles ohne CSS angezeigt, da der Bildschirm ja keine orientation zur�ck gibt.

Hat jemand von euch eine passende Abragesequenz? Ich habe viele Seiten per Google angeguckt, aber eigentlich sind nur Lösungen für Tablets da oder Desktop oder alles aber dann nur im portrait-Modus.... zum Auswandern

[ChristianPons]

Lösung gefunden:

es kommt auf die Reihenfolge der Einträge an. Die Abfrage sieht nun so aus und funktionert sauber auf iPhone 3G, iPhone 4, iPad und Desktop. Bei den Handhelds wird auch die Ausrichtung erkannt.

/* Desktop mittel */
@import url("Desktop Mittel.css") only screen and (min-width : 481px) and (max-width : 950px) and (min-height : 481) and (max-height : 900px);

/* Desktop */
@import url("Desktop.css") only screen and (min-width : 951px);

/* Phone portrait */
@import url("Phone Portrait.css") only screen and (max-width:320px) and (max-height : 480px);

/* Phone Landscape */
@import url("Phone Landscape.css") only screen and (min-width : 321px) and (max-width : 480px);

/* iPhone4 p */
@import url("iPhone4 Portrait.css") only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation : portrait);

/* iPhone4 l */
@import url("iPhone4 Landscape.css") only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation : landscape);

/* iPad1 portrait */
@import url("iPad1 Portrait.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait);

/* iPad1 landscape */
@import url("iPad1 Landscape.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape);

Vielleicht hilft es ja jemand - habe viel Zeit mit Probieren gebraucht.