Andi Licious' Blogosphäre

Wie ihr sicher mitbekommen habt, habe ich vor ein paar Tagen das CSS3-Media-Queries-Template “rausgehauen”. Der liebe Caschy war nun so nett und hat die Einstellungen einmal an seinem neuen Apple MacBook Pro Retina getestet. Leider ignoriert das Retina-Book die Angabe “min-device-width” erfolgreich und “min-width” bringt bei der angezeigten Auflösung von 1440×900 Pixel natürlich auch herzlich wenig (das Notebook hat zwar technisch 2880×1800 Pixel, angezeigt werden virtuell jedoch nur 1440×900 Pixel; wie beim Retina-iPhone mit 960×640 Pixel zu 480×320 Pixel). Lange Rede und kurzer Sinn: das Retina-Book reagiert nur auf folgende Angaben, die ich natürlich im Artikel auf Deutsch, im Artikel auf Englisch, der Demo sowie in der Download-CSS bereits angepasst habe.

only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx)

Eine wichtige Info noch: Natürlich würden auf diese Angaben alleine auf zum Beispiel das Apple iPhone 4 mit Retina-Display sowie das Apple iPad 3 (“das neue iPad”) ebenfalls mit Retina-Display anspringen. Hier wird, ausgehend von meinem CSS-Template, jedoch zusätzlich mit der ‘orientation’ bzw. für das iPad zusätzlich mit der ‘max-device-width’ gearbeitet, die euch dennoch differenzierte Einstellungen zulässt. Wichtig ist jedoch, dass im CSS-File, die Angaben für das Retina-Notebook vor den Angaben zur den mobilen Geräten geladen werden. Sollte sich dies bei euch bspw. sowieso nur auf das Ersetzen von zum Beispiel Logos beziehen, reicht natürlich eine Angabe vollkommen aus.

Anders als eventuell angenommen, springt das iPhone mit Retina-Display nicht auf zum Beispiel ‘min–moz-device-pixel-ratio: 2′ an, wenn dies bereits für das Retina-Notebook verwendet wird (es springt beim Ratio 2 vom Retina-Notebook an, nimmt jedoch die Angaben explizit für das Retina-iPhone mit Ratio 2 nicht an), sondern es muss 1.5 anstatt 2 verwendet werden, damit explizite Angaben auch gereifen. Dies wurde im Template ebenfalls korrigiert.

Oder anders gesagt:
Das Retina-Notebook mit ‘only screen and (min-resolution: 2dppx)’ geht auch bei Retina-iPhone; jedoch aktiviert (“überschreibt”) ‘only screen and (min-resolution: 2dppx)’ des Retina-iPhone nicht die Angaben des Retina-Nootbook, sondern nur ‘only screen and (min-resolution: 1.5dppx)’ überschreibt diese, wird es nach dem ‘only screen and (min-resolution: 2dppx)’ des Retina-Notebooks geladen. Augenroll.