Der Viewport ist der sichtbare Ausschnitt einer Webseite im Browserfenster. Auf dem Desktop entspricht er dem Inhaltsbereich des Fensters unterhalb von Menü- und Adressleiste, auf dem Telefon dem Streifen zwischen Browserleiste und Systemleiste. Seine Breite ist der Wert, gegen den jede Media Query rechnet. Er ändert sich im laufenden Betrieb, sobald du das Fenster ziehst, das Gerät drehst oder beim Scrollen die Adressleiste einfährt.
- Viewport
Der sichtbare Ausschnitt einer Webseite im Browserfenster, dessen Breite und Höhe über die Darstellung des Layouts entscheiden.
Beispiel: „Unterhalb von 600 Pixeln Viewport-Breite rutscht die Seitenleiste unter den Text.“Auch: Darstellungsbereich oder Anzeigebereich. Im Alltag wird der Viewport gern mit der Bildschirmauflösung des Geräts gleichgesetzt. Gemeint ist immer nur der Bereich, den der Browser gerade zum Zeichnen zur Verfügung hat.
Unterschieden werden der Layout-Viewport, gegen den das CSS rechnet, und der visuelle Viewport, den du nach dem Hineinzoomen tatsächlich siehst. Beim Zoomen bleibt der Layout-Viewport gleich groß, der visuelle schrumpft.
Der Viewport ändert seine Größe im laufenden Betrieb
Am Desktop zieht der Nutzer das Fenster in jede Breite, die ihm passt, und legt es oft neben ein zweites Fenster. Auf dem Telefon kommen das Drehen, die eingeblendete Bildschirmtastatur und die Browserleisten dazu, die beim Scrollen verschwinden und beim Zurückscrollen wieder auftauchen. Eine Layoutentscheidung deckt deshalb sinnvollerweise einen ganzen Bereich von Breiten ab.
Ohne meta-viewport-Tag rechnet das Telefon mit rund 980 Pixeln
Mobile Browser gehen von einem virtuellen Viewport von etwa 980 Pixeln Breite aus und skalieren das fertig gerenderte Ergebnis auf die Displaybreite herunter. Eine Media Query für 768 Pixel greift dann nie, und die Seite erscheint als geschrumpfte Desktop-Version mit unlesbarer Schrift. Eine Zeile im Head stellt das ab:
<meta name="viewport" content="width=device-width, initial-scale=1">In unseren Audits ist ein fehlendes meta-viewport-Tag der häufigste Grund, warum eine technisch responsive Seite auf dem Telefon unbrauchbar wirkt.
Das Aufziehen mit zwei Fingern gehört dem Nutzer
In dasselbe Tag lassen sich user-scalable=no und maximum-scale=1 schreiben. Beide sperren den Zoom. Wer schlecht sieht, kann die Seite dann nicht mehr vergrößern, und die WCAG verlangen mindestens die zweifache Vergrößerung. Safari unter iOS ignoriert die Sperre seit Version 10 aus genau diesem Grund. Wir empfehlen, beide Angaben wegzulassen und die Schriftgrößen im Layout von vornherein so zu wählen, dass niemand zoomen muss.