Das Apple MacBook Pro Retina und die CSS3 Media Queries

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.

  • Vielen Dank, sehr informativ! Gruß!

  • Vielen Dank auch von mir, ich freue mich schon auf den nächsten Artikel und weiter so!

  • Hallo Andreas,
    Wow, vielen vielen Dank, das war sehr hilfreich und informativ. Auch gut ist es, dass du es in deutsch und englisch angepasst hast, damit es überall jeder versteht :) Ich habe nämlich auch ein Retina Notebook und habe mich immer gefragt, wieso es nicht auf meine Befehle hören will :)