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.

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.

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: Skalierungsfehler 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"> |
initial-scale
: Der Wert legt den anfänglichen Zoomgrad fest.1.0
führt dazu, dass die Inhalte 1:1 dargestellt werden, d.h. auf einem Screen mit 320px Breite füllt eine 320px-breite Grafik die komplette Breite aus (siehe auch Screenshot oben). Dementsprechend führt z.B.2.0
zu einer 2x-fachen Vergrößerung.user-scalable
: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes
) oder nicht (no
).minimum-scale
undmaximum-scale
: Diese beiden Eigenschaft ermöglichen es, den Zoomgrad einzuschränken. Setzt man z.B. die maximale Skalierung auf2.0
, kann der Inhalt maximal 2x-fach vergrößert werden.
Quellen
Link: Configuring the Viewport (iOS)
Link: Targeting Screens from Web Apps (Android)
58 Kommentare zu: Mobile Devices: Viewport richtig einstellen
Pingback: CSS: width:100% beim iPad und anderen Tablets » miZine
Pingback: In 5 Schritten: Von der aktuellen Website zum Responsive Design - DieProduktMacher | DieProduktMacher
Pingback: Das eigene Grid System erstellen | AUF DEM DACH
Pingback: Fragen zum viewport - XHTMLforum
Pingback: Google integriert Mobile Usability Reports zum Webmaster Tool | chriscloverman
Pingback: Viewport: Das Fenster zum modernen Webdesign. | André Renvert – a freelance creative
Pingback: Die Internetseite für mobile Endgeräte optimieren » Seite, Besucher, Internetseite, Dieser, Schritten, Endgerät » Suleitec Infoblog