Der Viewport ist der sichtbare Darstellungsbereich einer Website auf einem Bildschirm oder Gerät. In der Webentwicklung und im responsiven Webdesign bildet er die Grundlage dafür, wie Layout und Inhalte an unterschiedliche Bildschirmgrößen angepasst werden – ohne korrekt konfigurierten Viewport funktioniert responsives Design nicht zuverlässig.
Das Viewport-Meta-Tag
Damit mobile Browser eine Seite in der tatsächlichen Gerätebreite statt in einer verkleinerten Desktop-Ansicht darstellen, braucht jede responsive Website dieses Tag im <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: Der Layout-Viewport orientiert sich an der tatsächlichen Gerätebreite statt an einer festen Desktop-Breite.initial-scale=1: Die Seite wird beim ersten Laden ohne zusätzlichen Zoom dargestellt.
Fehlt dieses Tag, laden mobile Browser die Seite standardmäßig in einer Desktop-Breite (meist 980px) und skalieren sie anschließend verkleinert herunter – Text und Elemente wirken dadurch winzig und schlecht lesbar.
Layout-Viewport vs. Visual-Viewport
- Layout-Viewport: Der gesamte verfügbare Darstellungsbereich, auf dem die Seite gerendert wird – kann größer sein als der tatsächlich sichtbare Bereich.
- Visual-Viewport: Der Ausschnitt davon, der ohne Scrollen oder Zoomen tatsächlich sichtbar ist. Beim Hineinzoomen bleibt der Layout-Viewport unverändert, während der Visual-Viewport kleiner wird.
Responsive Design berücksichtigt in erster Linie den Visual-Viewport, um sicherzustellen, dass Inhalte auf jeder Bildschirmgröße angemessen skaliert und angeordnet werden.
Dynamische Viewport-Einheiten: dvh, svh, lvh
Ein lange unterschätztes Problem: Klassische CSS-Einheiten wie vh (viewport height) berücksichtigen nicht, dass mobile Browser ihre Adressleiste beim Scrollen ein- und ausblenden – die tatsächlich sichtbare Höhe ändert sich dadurch laufend, was zu springenden Layouts führte. Moderne CSS-Einheiten lösen das gezielt:
| Einheit | Bedeutung |
|---|---|
svh | Small Viewport Height – kleinste mögliche Höhe (Adressleiste eingeblendet) |
lvh | Large Viewport Height – größte mögliche Höhe (Adressleiste ausgeblendet) |
dvh | Dynamic Viewport Height – passt sich live der aktuellen Höhe an |
Für Elemente, die zuverlässig die volle Bildschirmhöhe ausfüllen sollen (etwa Hero-Sections), sind dvh-Einheiten heute die robustere Wahl gegenüber klassischem vh.
Viewport und Mobile-First-Design
Ein korrekt konfigurierter Viewport ist die technische Grundvoraussetzung für Mobile-First-Design – den Ansatz, Layouts zuerst für kleine Bildschirme zu entwickeln und dann schrittweise für größere zu erweitern. Da Google seit Jahren primär die mobile Darstellung einer Seite für die Indexierung bewertet, wirkt sich ein fehlerhaft konfigurierter Viewport direkt negativ auf das Suchmaschinen-Ranking aus.
Fazit
Der Viewport ist eines der unscheinbarsten, aber technisch wichtigsten Details responsiven Webdesigns – ohne korrekte Konfiguration scheitert die mobile Darstellung, unabhängig davon, wie durchdacht das restliche Layout ist. Wir berücksichtigen Viewport- und responsive Anforderungen bei jedem Projekt von Beginn an. Mehr dazu im Rahmen unserer Website-Entwicklung oder direkt im unverbindlichen Beratungsgespräch.
Häufige Fragen
Was macht das <meta name="viewport"> Tag genau?
Was ist der Unterschied zwischen Layout-Viewport und Visual-Viewport?
Warum wirkt eine Website ohne Viewport-Meta-Tag auf dem Handy verkleinert?
Was sind dynamische Viewport-Einheiten (dvh, svh, lvh) und wofür braucht man sie?
vh berücksichtigen nicht, dass mobile Browser ihre Adressleiste beim Scrollen ein- und ausblenden, wodurch sich die tatsächlich sichtbare Höhe laufend ändert. Die dynamischen Einheiten svh (kleinste mögliche Höhe), lvh (größte mögliche Höhe) und dvh (aktuelle, sich live anpassende Höhe) lösen genau dieses Problem und verhindern springende Layouts auf Mobilgeräten.