Apples iPhone 6 und die Auswirkung der neuen Display-Auflösung für Webentwickler
Kommentare

Lange wurde darauf gewartet, gestern wurde es vorgestellt: das neue iPhone – und das gleich in zwei verschiedenen Versionen, nämlich dem iPhone 6 und dem iPhone 6 Plus. Zu den neuen Features des Apple-Geräts gehört vor allem eine weitaus höhere Auflösung, als bei den früheren iPhones. Im Vergleich zum Vorgängermodell, dessen Auflösung noch bei 480x320px lag, verfügt das iPhone 6 mit 960×640 über eine doppelt so hohe Auflösung. Da stellt sich natürlich die Frage, was so ein gewaltiger Unterschied in der Auflösung für Webentwickler bedeutet. Dem ging Peter-Paul Koch in einem Blogpost nach.

CSS-Pixel spielen für iPhone 6 keine Rolle

Für Webentwickler spielen nicht die physischen Pixel eine Rolle, sondern vor allem die CSS-Pixel, die in CSS-Declarations wie width: 300px oder font-size: 14px genutzt werden. Mit der eigentlichen Auflösung der Geräte wie dem iPhone 6 oder seinen Vorgängermodellen haben sie zwar nichts zu tun, allerdings lässt sich mit dem iPhone berechnen, wie viele CSS-Pixel wie vielen physischen Pixel entsprechen, nämlich indem man screen.width durch window.innerWidth teilt.

Bedacht werden muss dabei, dass die Breite der CSS-Pixel stets gleich bleibt – beim iPhone 6 heißt das, dass eine Website, die nicht rangezoomt ist, immer mit 980 CSS-Pixel dargestellt wird und es für Webentwickler nicht relevant ist, wie vielen physischen Pixel dies entspricht. Würde Apple dieses System verändern, würden alle iPhone-optimierten Websites innerhalb kurzer Zeit nur noch unzureichend dargestellt werden.

iPhone 6-Auflösung beeinflusst Media Queries

Allerdings bietet die neue iPhone 6- Auflösung trotzdem genug Fallstricke für Webdesigner, nämlich wenn es um das device-width Media Query und das <meta>-Tag geht. Beides arbeitet mit physischen Pixel anstatt mit CSS-Pixel, weil sie vom Seiteninhalt beeinflusst werden.

Das device-width Media Query misst die Breite des Geräts in physischen Pixel, während dem gegenüber das width Media Query die komplette Breite der Website in CSS-Pixel misst, was bedeutet, dass es beim iPhone 6 immer 980 Pixel sind.

Auch beim <meta>-Tag sorgt die erhöhte iPhone-Auflösung für Probleme. Ohne das Tag würde sich die Website auf die vollständige Breite des Layout-Viewports strecken, was nicht unbedingt nutzerfreundlich ist. Stattdessen soll der Text möglichst auf dem gesamten Display dargestellt werden. Das <meta>-Tag sorgt dafür, dass der Layout-Viewport im Falle des iPhones auf 320px zusammengezogen und der Inhalt so für das iPhone optimiert dargestellt wird.

Problemlösung mit dips

Um das Problem, das durch die hohe Auflösung des iPhone 6 Inhalte nicht mehr für das iPhone optimiert werden können, zu umgehen, ist es wahrscheinlich, dass Apple einen weiteren Layer, die sogenannten device-independent-pixels (dips) einfügen wird. Damit würde beim neuen iPhone die Displaygröße immer noch als 320px ausgegeben, was der Hälfte der tatsächlichen Auflösung entspricht. Dieser Trick wurde übrigens schon bei anderen Geräten angewendet, etwa dem Nexus One. Dies ist allerdings nur eine verkürzte Darstellung der Thematik; PPK beschreibt dieses Vorgehen sehr viel ausführlicher in seinem Blogpost.

Es zeigt sich also, dass Webentwickler durch die erhöhte Auflösung des iPhone 6 nicht zwingend in Schockstarre verfallen müssen. Zwar werden Entwickler beim Designen von Websites, die für die Darstellung auf Geräten mit so hoher Auflösung optimiert sind, Blut und Wasser schwitzen, allerdings wird es nicht komplett unmöglich sein, Websites zu designen, die für das neue Apple-Gerät optimiert sind.

Aufmacherbild: Dripping blood number 6 isolated on white von Shutterstock / Urheberrecht: Steve Collender

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -