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.0fü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.0zu 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-scaleundmaximum-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)
11 Kommentare zu: Mobile Devices: Viewport richtig einstellen
25. Juli 2012, 16:14
Vielen Dank für deinen super Bericht dank dir konnte ich ein Problem lösen. Initial-scale war das Problem es hat einen Tick zu weit immer reingezoomt beim öffnen der Seite also habe ich die initial-scale auf 0.4 verkleinert und jetzt ist es super. Vielen Dank nochmals.
1. Oktober 2012, 21:43
Vielen Dank für die tolle Erklärung des viewport.
17. Oktober 2012, 18:02
Hallo, danke wirklich super erklärt, hatte genau damit Probleme. Jetzt konnte ich es entlich lösen. Tausend Dank
16. November 2012, 15:32
Vielen Dank,
kurz, prägnant, wesentlich. Das mag ich.
So konntest Du mir schnell bei meinem Problem helfen.
Es gibt zwar auch andere Erklärungen, die sind aber meist zu viel Geschwafel um wirklich effektiv zu helfen.
Danke nochmal.
21. Dezember 2012, 15:53
Super Post! Kurz auf den Punkt gebracht!
13. Januar 2013, 14:55
Besten Dank für deine Hilfestellung. Ich war schon mit dem Problem konfrontiert und das hat mir viel geholfen.
19. Januar 2013, 16:00
Da ich soeben ein Reponsive Design entwerfe hat mir der Hinweis super geholfen. Kurz und knapp erklärt aber toll auf den Punkt gebracht.
21. Januar 2013, 21:37
Schöner Post. Meine Frage gibt es schon einen Lösungsansatz der die Display größe in Inch oder cm berücksichtigt? Nehmen wir mal Full HD (1920x1080px) Ich sitze also vor einem 24 Zöller soweit OK, Schaue ich mir die Seite aber auf einem Smart TV an, muss ich da schon übel dicht rangehen um die Schrift lesen zu können, also dichter als man normalerweise vor einem TV sitz und nun kommen auch noch die Smartphones mit dieser Auflösung, die hat man normalerweise ca. 30 -50 cm vor der Nase. Ich hab also eine Auflösung und drei völlig unterschiedliche Displaygrößen und wenn ich nur mit Media-queries arbeite und dem viewport komme ich da nicht auf optimale Ergebnisse. Jemand nen Vorschlag?
6. März 2013, 21:34
Andre, maybe you could address different screen sizes using media queries and pixel ratio: http://stackoverflow.com/questions/11722442/is-there-a-way-to-use-dpi-in-css-media-queries-instead-of-px
26. März 2013, 16:52
Vielen Dank für den tollen Beitrag, ich wage zu behaupten, dass ich das Prinzip verstanden habe! Trotzdem schaffe ich es nicht, meine Website so einzustellen, dass sie am IPhone (auf meinem Android Smartphone gehts) verkleinert, in ihrer ganzen Breite dargestellt wird. Ich weiß natürlich, dass dies nicht Sinn der Sache ist, überhaupt bei dem Theme, aber der Webseitenbesitzer will dies nun mal so… Hat jemand einen Tipp für mich, was ich noch ändern könnte? Danke!
2. Mai 2013, 13:56
Vielen Vielen Dank!!!
Echt klasse