Viewport

Was ist der Viewport?

Der Viewport ist der Bereich einer Webseite, der für den Nutzer sichtbar ist. Auf dem Desktop ist es der Inhaltsbereich des Browserfensters, auf dem Smartphone der Bildschirm. Er ändert sich, wenn der Nutzer das Gerät dreht, das Fenster vergrößert oder zoomt. Dein CSS richtet sich nach der Viewport-Breite. Sie richtig zu setzen ist deshalb die Grundlage von Mobile-First-Design und responsiven Layouts.

Layout-Viewport und visueller Viewport

Browser verfolgen tatsächlich zwei Viewports (laut MDN-Seite zur Visual Viewport API):

• Layout-Viewport: umfasst alle Elemente der Seite. Er ändert sich beim Pinch-Zoom nicht.
• Visueller Viewport: der Teil der Seite, der gerade auf dem Bildschirm zu sehen ist. Er schrumpft beim Hineinzoomen, und die Bildschirmtastatur kann ihn verkleinern, ohne den Layout-Viewport zu verändern.

Deshalb kann eine fixierte Leiste hinter der Tastatur verschwinden. Skripte lesen den visuellen Viewport über window.visualViewport (width, height, scale, offsetTop). MDN führt ihn als weit verfügbar seit August 2021.

Das Meta-Viewport-Tag

Mobile Browser rendern Seiten oft in einem breiteren virtuellen Viewport (MDN nennt 980 px auf einem 640-px-Bildschirm) und skalieren sie herunter, sodass deine Media Queries die falsche Breite sehen. Das Viewport-Meta-Tag behebt das. MDN empfiehlt:

<meta name="viewport" content="width=device-width">

Viele Seiten ergänzen initial-scale=1. Laut MDN ist das meist unnötig, aber unschädlich, wenn die Seite bei 100 % Zoom starten soll. Die übrigen Direktiven:

Viewport-Einheiten

Der Viewport bildet die Basis für vw (1 % der Viewport-Breite) und vh (1 % der Höhe). Laut MDN ändert sich die berechnete Größe dieser Einheiten, wenn sich der Viewport ändert. Die Breite im Meta-Tag ist die Grundlage für vw.

Zoom nie blockieren

Mit user-scalable=no können Menschen mit Sehbehinderung die Seite nicht vergrößern. MDN warnt, dass dies sie daran hindert, den Seiteninhalt zu lesen und zu verstehen, dass WCAG mindestens 2-fache Skalierung verlangt und dass eine 5-fache Vergrößerung empfehlenswert ist. Zwei WCAG-Erfolgskriterien sind relevant: 1.4.4 Textgröße ändern (Text lässt sich bis 200 Prozent ohne Verlust von Inhalt oder Funktion vergrößern) und 1.4.10 Umbruch (Inhalt funktioniert bei einer Breite von 320 CSS-Pixeln ohne Scrollen in zwei Richtungen). Browser dürfen diese Angaben auch ignorieren: Laut MDN ignoriert iOS ab Version 10 standardmäßig user-scalable, minimum-scale und maximum-scale. Mehr dazu unter WCAG und barrierefreie Layouts.

Typische Fehler

• Kein Viewport-Meta-Tag. Die Seite wird in einem breiten virtuellen Viewport gerendert und wirkt auf dem Smartphone winzig.
• Zoom deaktivieren mit user-scalable=no oder einem niedrigen maximum-scale. Das schließt Menschen mit Sehbehinderung aus und ist gegen Layoutfehler nicht nötig.
• Feste Pixelbreiten. Elemente, die breiter als der Viewport sind, erzeugen horizontales Scrollen und brechen den Umbruch.
• Ein Layout nur an vh koppeln. Die sichtbare Höhe ändert sich mit Browser-Leisten und Tastatur. Teste mit geöffneter Tastatur.
• Nur am Desktop testen. Ändere die Fenstergröße oder nutze den Gerätemodus deines Browsers und prüfe dann ein echtes Smartphone.

Viewport und Performance-Tests

Die Viewport-Größe entscheidet, welche Media Queries greifen und welches Bild deine Seite lädt. Desktop- und Mobil-Läufe können daher unterschiedliche Inhalte laden. Das LoadFocus Page-Speed-Monitoring führt Lighthouse-Audits für Desktop und Mobilgeräte aus 25 Cloud-Regionen aus, sodass du beide vergleichen und die Core Web Vitals im Zeitverlauf verfolgen kannst. Weitere Hinweise stehen in unserem Leitfaden zur Verbesserung der Website-Geschwindigkeit (auf Englisch). Quellen: MDN zum Viewport-Meta-Tag und zur Visual Viewport API (auf Englisch).

Häufige Fragen: Viewport

Was bewirkt width=device-width?

Es setzt die Breite des Layout-Viewports auf die Bildschirmbreite des Geräts in CSS-Pixeln, sodass die Seite nicht in einem breiteren virtuellen Viewport gerendert und heruntergerechnet wird.

Ist user-scalable=no erlaubt?

Technisch ja, aber es blockiert den Pinch-Zoom und schadet Menschen mit Sehbehinderung. Laut MDN verlangt WCAG mindestens 2-fache Skalierung, empfohlen ist 5-fach. Lass den Zoom aktiviert.

Was ist der Unterschied zwischen Layout- und visuellem Viewport?

Der Layout-Viewport ist die Fläche, nach der dein CSS layoutet. Beim Pinch-Zoom bleibt er unverändert. Der visuelle Viewport ist der aktuell sichtbare Teil und schrumpft beim Zoomen oder wenn die Bildschirmtastatur erscheint.

Brauche ich initial-scale=1?

Oft nicht. Laut MDN ist es meist unnötig, aber unschädlich, wenn die Seite bei 100 % Zoom starten soll. Vermeide vor allem horizontalen Überlauf.

Wie teste ich verschiedene Viewports?

Ändere die Fenstergröße, nutze die Geräteleiste der Entwicklertools deines Browsers und bestätige das auf einem echten Gerät. Auch Lab-Tools wie Lighthouse testen Mobil und Desktop getrennt.