Viewport

Der Viewport ist der Bereich einer Webseite, der im Browserfenster oder auf dem Display gerade sichtbar ist. Auf Mobilgeräten wird er über das Meta-Viewport-Tag gesteuert, damit Seiten in der richtigen Breite statt als verkleinerte Desktop-Version angezeigt werden.

Die empfohlene Viewport-Angabe

<meta name="viewport" content="width=device-width, initial-scale=1">

Nicht verwenden: user-scalable=no, maximum-scale=1 oder minimum-scale, die das Vergrößern blockieren. Das verstößt gegen WCAG 1.4.4 Textgröße ändern und schließt Menschen mit Sehbehinderung aus. Einige Browser ignorieren die Sperre inzwischen, verlassen sollte man sich darauf nicht.

Viewport und Barrierefreiheit

• Reflow (WCAG 1.4.10): Inhalte funktionieren bei 320 CSS-Pixel Viewport-Breite ohne horizontales Scrollen.
• Viewport-Einheiten: vw für Schriftgrößen nur kombiniert mit rem (z. B. clamp()), sonst skaliert Text beim Zoomen nicht mit.
• Höhe: 100vh kann mobil durch Browserleisten abgeschnitten werden; 100dvh ist robuster.
• Sticky-Elemente verkleinern den nutzbaren Viewport stark – vor allem beim Zoomen und im Querformat.

Häufige Fragen

Warum darf ich das Zoomen nicht sperren, wenn mein Layout responsiv ist?

Responsive Layouts passen die Struktur an, ersetzen aber nicht das individuelle Vergrößern von Text und Bildern, das viele Menschen benötigen.

Was ist der Unterschied zwischen Layout- und Visual-Viewport?

Der Layout-Viewport bestimmt das Seitenlayout, der Visual-Viewport ist der tatsächlich sichtbare Ausschnitt – etwa beim Pinch-Zoom oder bei eingeblendeter Bildschirmtastatur.

Verwandte Begriffe: Responsive Design, Reflow, Zoom, Mobile Barrierefreiheit