Webseiten optimieren für Retina-Displays bei Apple-Geräten
Seite 3: Basis-Wissen
Mit dem ersten iPhone hat Apple das inzwischen in allen Mobilbrowsern verbreitete Meta-Tag Viewport eingeführt. Es sorgt dafür, dass für den Desktop optimierte Webseiten – und das ist immer noch der Großteil – auf der kleinen Anzeigefläche nicht nur in einem Ausschnitt, sondern komplett zu sehen sind, indem es den Inhalt auf die zur Verfügung stehende Anzeigefläche skaliert. Mit der komfortablen Touch-Bedienung ist es dann ein Leichtes, die gewünschten Teile mit der Fingerspreiz-Geste zu vergrößern. Als Parameter verarbeitet das Viewport-Tag die Anzeigebreite in Pixeln. Ein Standard-Eintrag kann so aussehen:
<meta name="viewport" content="width=device-width">
Während in dem Meta-Tag die physikalischen Pixel gemeint sind, ist es für Webdesigner schon lange selbstverständlich, in den CSS-Gestaltungsvorlagen Pixel (px) als relative Maßangabe zu verwenden. Ein CSS-Pixel entspricht also nicht einem Pixel auf dem Display. Statt dessen stehen die CSS-Punkte in Bezug zu einem definierten Größenverhältnis. Da dieses zum Beispiel zwischen alten und neuem iPad sowie altem und neuen MacBook Pro gleich geblieben ist, sehen Webseiten auf einem Retina-Display vom Layout her identisch aus – nun aber in doppelter Auflösung.
Eine Kernabfrage in unserem selbst entwickelten Skript ist daher die Abfrage der Auflösung des verwendeten Gerätes, um je nach Display zu entscheiden, ob das bessere Bild überhaupt Sinn ergibt. In JavaScript kann man das zum Beispiel mit Hilfe der Eigenschaft window.devicePixelRatio erledigen. Alternativ kommen CSS-Media-Queries zum Einsatz. Bei normalen Displays ist der Wert der devivePixelRatio willkürlich auf 1 definiert worden, bei besser aufgelösten liegt er oberhalb 1. Alle Retina-Displays von Apple geben eine 2 aus, weil sie über die doppelte Auflösung verfügen.
In den folgenden Code-Schnipseln können Sie die wesentlichen Schritte nachvollziehen. Die vollständige Javascript-Lösung finden Sie als Download über den Webcode am Ende des Artikels. In dem Skript sind auch zahlreiche weitere Kommentare eingebaut, die den Ablauf verständlicher machen.
Lesen Sie weiter in Mac & i Heft 7, wahlweise auf dem iPad. Abonnenten können auch eine kostenlose PDF-Datei laden.
(thk)
