HTML5 Mobile

Mobile Devices: Viewport richtig einstellen

Zu den absoluten Grundlagen der mobilen Entwicklung gehört das Meta-Element viewport. Diese eine Zeile HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.

Die Browser der mobilen Devices gehen zuerst einmal davon aus, dass Websites nicht für mobile Endgeräte ausgelegt sind und die Website-Breite die Display-Breite um einiges übersteigt. Der Browser-Viewport (Anzeigebereich) ist deshalb z.B. in Mobile Safari auf eine Breite von 980 Pixeln eingestellt, so dass die meisten Website komplett zu sehen sind. Logischerweise mit dem Nachteil, dass die Inhalte sehr klein und Schriften nicht lesbar sind. Der Nutzer muss dementsprechend hineinzoomen.

Viewport für normale Websites einstellen

Die Einstellung des Viewport lässt sich sehr einfach über ein HTML-Element anpassen. Apple selbst schreibt, dass es sich dabei um die wichtigste Einzelmaßnahme zur Optimierung für iOS handelt.

This is the single most important optimization that you can do for iOS—make sure your webpage looks good the first time it is displayed on iOS.

Weicht die eigene Website von der oben genannten Standardbreite ab, so kann man den Viewport anpassen. Dadurch kann man dafür sorgen, dass Inhalt und Anzeigebereich übereinstimmen. Bei schmaleren Layouts wird dadurch z.B. kein unnötiger Platz verschenkt, sondern die Website in der möglichen Maximalgröße dargestellt.

Startansicht von apple.com auf mobilen Device (links) und gezoomte Ausschnitt mit lesbarer Schrift (rechts)

Für die Änderung fügt man folgende Zeile in den HTML-Head ein, die dann von mobilen Geräten ausgewertet wird.

<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=1024" />
</head>
<body>
</body>

Viewport für mobile Websites anpassen

Handelt es sich um Website, die speziell für mobile Devices erstellt oder optimiert ist, geht man meist nicht den obigen Weg, eine fixe Breite für den Viewport anzugeben (Ein iPhone hat z.B. im Hochformat eine Breite von 320px und im Querformat 480px). Dies hätte zur Folge, dass im Hoch- und Querformat die gleichen Inhalte, lediglich in einem unterschiedlichen Zoomlevel, gezeigt würden.

Stattdessen wird deshalb üblicherweise folgende Formel verwendet: Breite des Viewports = Breite des Devices. Konkret bedeutet dies: Das iPhone hat 320px Breite im Hochformat, weshalb genau 320px der Website gezeigt werden (1:1-Darstellung). Ebenso werden im Querformat dann 480px gezeigt. Diese flexible Einstellung ist einerseits geräteunabhängig und ermöglicht es andererseits auch, im Querformat den gewonnen Platz in der Breite sinnvoll zu nutzen.

Vergleich: Ansicht auf mobilem Device mit Meta-Element im Quellcode (links; width=device-width) und ohne (rechts)

Dies abgebildete Beispiel lässt sich hier ausprobieren: Beispiel mit Viewport-Einstellung und Beispiel ohne Viewport-Einstellung

An dieser Stelle sei kurz auf einen iOS-Bug hingewiesen, der manchen beim Ausprobieren und Einstellen des Viewports verwirren könnte: Skalierungs­fehler beim Drehen ins Querformat

Viewport-Einstellungen

Das Meta-Element für den Viewport besitzt neben der Breite weitere Eigenschaften, die komma-separiert aufgelistet werden.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Quellen

Link: Configuring the Viewport (iOS)
Link: Targeting Screens from Web Apps (Android)

58 Kommentare zu: Mobile Devices: Viewport richtig einstellen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*

*