Viewport

Der Viewport ist der sichtbare Bereich einer Webseite im Browserfenster des Nutzers. Auf Desktop-Computern entspricht der Viewport der Fenstergroesse, auf Mobilgeraeten der Bildschirmbreite. Die korrekte Viewport-Konfiguration ist das Fundament fuer Responsive Design und mobile Nutzererfahrung.

Ohne den Viewport Meta Tag interpretieren mobile Browser eine Webseite als Desktop-Seite (typischerweise 980px breit) und skalieren sie herunter, um sie auf den kleinen Bildschirm zu quetschen. Das Ergebnis: winziger, unlesbarer Text und eine unbrauchbare Nutzererfahrung.

Der Viewport Meta Tag

Standard-Konfiguration

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

Dieser Tag ist Pflicht in jedem HTML-Dokument und teilt dem Browser zwei Dinge mit:

Erweiterte Eigenschaften

Viewport und Responsive Design

CSS Viewport Units

CSS bietet Einheiten, die sich am Viewport orientieren:

• vw: 1 % der Viewport-Breite
• vh: 1 % der Viewport-Hoehe
• svh/lvh/dvh: Small, Large und Dynamic Viewport Height (loesen das iOS-Adressleisten-Problem)
• vmin/vmax: Kleinere/groessere Dimension des Viewports

Media Queries basierend auf Viewport

CSS Grid und CSS Flexbox passen Layouts an die Viewport-Breite an:

/* Mobile: eine Spalte */
.grid { display: grid; grid-template-columns: 1fr; }

/* Tablet: zwei Spalten */
@media (min-width: 735px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop: drei Spalten */
@media (min-width: 1068px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; }
}

Viewport-Probleme auf Mobilgeraeten

Das 100vh-Problem

Auf iOS-Geraeten schliesst 100vh die Adressleiste mit ein, was dazu fuehrt, dass Inhalte hinter der Browser-UI verschwinden. Die Loesung: Die neuen Viewport-Einheiten svh (Small Viewport Height, ohne Adressleiste), lvh (Large Viewport Height, mit Adressleiste) und dvh (Dynamic Viewport Height, passt sich an).

Notch und Safe Areas

Geraete mit Notch (iPhone) oder Kameraaussparung benoetigen viewport-fit=cover in Kombination mit CSS env(safe-area-inset-*), um Inhalte nicht hinter Hardware-Elementen zu verstecken.

Virtuelle Tastatur

Wenn die virtuelle Tastatur auf Mobilgeraeten erscheint, wird der Viewport kleiner. Formulare und Input-Felder muessen so positioniert sein, dass sie sichtbar bleiben. Die Visual Viewport API ermoeglicht programmatische Reaktion auf Viewport-Aenderungen.

Viewport und SEO

Google verwendet den Mobile Viewport fuer die Indexierung (Mobile-First Indexing). Eine fehlende oder fehlerhafte Viewport-Konfiguration fuehrt zu schlechter mobiler Darstellung und kann sich negativ auf das Ranking auswirken. Der Lighthouse Score prueft den Viewport Meta Tag als Teil des SEO-Audits.

Viewport und Accessibility

Die Viewport-Konfiguration hat direkte Auswirkungen auf die Barrierefreiheit:

• Zoom erlauben: user-scalable=no oder maximum-scale=1.0 verbieten das Zoomen und sperren sehbehinderte Nutzer aus. Das ist ein WCAG-Verstoss (Kriterium 1.4.4).
• Lesbare Schriftgroessen: Ohne korrekten Viewport werden Texte auf Mobilgeraeten unleserlich klein dargestellt.
• Touch Targets: Der Viewport beeinflusst die tatsaechliche Groesse von Buttons und Links -- das Minimum von 44x44px bezieht sich auf CSS-Pixel, nicht auf physische Pixel.