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)

35 Kommentare zu: Mobile Devices: Viewport richtig einstellen

Pixelox
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.

Rhomas
1. Oktober 2012, 21:43

Vielen Dank für die tolle Erklärung des viewport.

jswebschmiede
17. Oktober 2012, 18:02

Hallo, danke wirklich super erklärt, hatte genau damit Probleme. Jetzt konnte ich es entlich lösen. Tausend Dank

weichwerker
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.

alles-was-rockt.com
21. Dezember 2012, 15:53

Super Post! Kurz auf den Punkt gebracht!

Sam
13. Januar 2013, 14:55

Besten Dank für deine Hilfestellung. Ich war schon mit dem Problem konfrontiert und das hat mir viel geholfen.

elotse
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.

Andre
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?

Stefan
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!

DiGGA-CODE
2. Mai 2013, 13:56

Vielen Vielen Dank!!!
Echt klasse

Jürgen
14. Juni 2013, 13:56

Hallo, vielen Dank für die sehr verständliche Erklärung. Ich hätte aber dazu noch die Frage, wo der meta tag platziert werden muss, wenn Frames verwendet werden?
Vielen Dank im Voraus
Jürgen

Axel
9. Juli 2013, 07:04

Hallo und vielen Dank für die gute Erklärung. Ich habe viewport mit in eine Webseite eingebaut. Bei Android-Smartphones besteht jedoch noch ein Problem: Beim erstmaligen Aufruf der Seite wird ein falsches CSS geladen, das für Tablets. Erst wenn man einen weiteren Menüpunkt auf der Seite, bzw. die Seite neu lädt wird das richtige css für Smartphones geladen. Hier mal der Quellcode im Head meiner Seite:

Weiß da jemand einen Rat?
Vielen Dank!
Axel

Tobias
18. September 2013, 13:08

Danke! Das hat geholfen :)

Alex
9. Oktober 2013, 19:51

Vielen dank für die einfache und simple Beschreibung.

Andreas Himmel
17. Oktober 2013, 08:16

Danke ! War sehr hilfreich kurz und knackig :)

Gg
3. Dezember 2013, 01:12

Stefan du hast das prinzip verstanden ja? Was tut die angabe initial-scale von 0.5? Natürlich ist es nicht sinn der sache eine webpage so darzustellen dass alles sichtbar ist. Das ist mal klar.

SNeumann
8. Dezember 2013, 11:52

Befasse mich auch gerade mit HTML5.

Meine Frage ist: Welche native Größe bzw. Arbeitsplatz-Größe ist bei der erstmaligen Erstellung einer neuen Seite am besten, wenn sie zukünftig in mobilen Browsern und Desktopbrowsern optimal angezeigt werden soll?

Meine Hintergedanken:
1) Erstelle ich am Desktop eine Seite mit einer Breite von 1080px, dann wird sie bei der Darstellung auf einem mobilen Device mit geringer Auflösung -runterskalliert-. Trotzdem werden ja die vorher zB. hochauflösenden Bilder in voller Auflösung in den Chache geladen (= viel unnötiger Traffic)

2) Erstellen ich eine Seite mit einer Breite von zB. 1200px und passe die Elemente wie zB. Bilder an diese Auflösung an, dann sieht es auf dem Handy vllt. gut aus. Öffne ich diese Seite aber an einen Desktop (mit höherer Auflösung), so werden die Elemente -hochskalliert- (=verpixelung)

Also was wäre die beste Lösung für das Problem?

BiSe
22. Januar 2014, 12:23

Super, Super,Super!!!! Vielen Dank dür diese Hilfe.
Nach stundenlangem Suchen endlich gefunden.

Großes Lob

Seniore T
17. April 2014, 01:38

Danke. Toll erklärt!
Hat auch mir sehr geholfen.

Kaminofen Heinz
20. April 2014, 12:42

Danke, konnte Dank deiner Hilfe ein problem rasch beseitigen :)

Marcel
28. April 2014, 08:32

Du hast es wirklich sehr gut erklärt, Danke! :-)

Ines
9. Juni 2014, 21:32

Genau was ich gesucht habe. Vielen dank.

Hans
24. Juni 2014, 17:26

Saubere Erklärung, vielen Dank! Du hast mir weitergeholfen!

spn
11. Juli 2014, 07:59

Ich bedanke mich auch. Danke für diese Übersicht =)

Harald Schön
18. Juli 2014, 12:32

Wir haben das Meta-Element Viewport wie angegeben in der Webseite http://www.photographer-monaco.com eingebaut, um die Webseite für moble Geräte und Desktop zu optimeren.
Beim Test mit iPhone 3G und Google PageSpeed Insights wird die Seite vergrößert dargestellt. Unser Ziel ist, dass die Webseite zentriert in das Display eingepasst wird. Gibt es dazu eine Lösung?

markus
24. Juli 2014, 02:29

hallo, habe eine reine html seite inkl. css. bei mir hat das ganze nicht geklappt, die webseite schaut auf dem iphone immernoch hineingezoomt aus, das alles auf dem bildschirm klein erscheint, man muss halt reinzoomen. mit dem viewport im metaberech des index.html hat es leider nicht geklappt. seite schaut immer noch genau aus. hab hoffe jemand kann mir helfen.

probiert habe ich folgendes schon

und

und

jeweils einzeln und nicht alle zusammen

Rafi
25. Juli 2014, 21:55

Vielen Dank! Hat mir sehr geholfen!

Michael Finger
20. August 2014, 06:50

Das war es was ich gesucht habe. Sehr herzlichen DANK für die Erklärung, vor allem das es so verständlich geschrieben ist.

Martin Theiler
19. September 2014, 09:18

Vielen Dank für den Beitrag! Ist der Teil “user-scalable…” eigentlich Pflicht oder kann man den weglassen? IN vielen responsive WP-Themes usw. sehe ich dieses Tag nicht.

erleuchteter
6. Oktober 2014, 13:46

Danke, ich bin mehrmals hingewiesen worden, ich solle einen Viewport, einfügen. Aber was ist ein Viewport, das war mir nicht klar. Dank deines Beitrages, konnte ich das Problem lösen.
Und dadurch mehr Besucher erfreuen.

m.f.G.

Hinterlasse eine Antwort

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

*

*