Das Viewport-Meta-Tag (<meta name="viewport">) gibt Browsern Hinweise, wie sie den sichtbaren Bereich einer Seite dimensionieren und skalieren sollen, vor allem auf Smartphones. Ohne das Tag rendern mobile Geräte die Seite in Desktop-Breite und skalieren sie herunter.
Wichtige Werte
Die gängige Angabe lautet width=device-width, initial-scale=1. MDN beschreibt width=device-width als Weg, die virtuelle Viewport-Breite (zum Beispiel 980 px) an die Gerätebreite anzupassen. Erst dann greifen Media Queries wie vorgesehen.
Weitere Werte sind minimum-scale, maximum-scale, viewport-fit für Displays mit Aussparung und interactive-widget für das Verhalten bei eingeblendeter Tastatur. Mit user-scalable=no lässt sich das Zoomen abschalten. MDN rät davon ab, weil es WCAG 1.4.4 (Textgröße ändern) verletzt und Menschen mit Sehschwäche ausschließt.
Wie prüft man es?
Der Lighthouse-Test besteht, wenn im <head> ein Viewport-Tag mit einem content-Attribut steht, das width= enthält. Bei einem initial-scale unter 1 aktiviert der Browser laut Lighthouse die Doppeltipp-Zoom-Erkennung und verzögert jeden Tap um 300 Millisekunden.
Beispiel
<meta name="viewport" content="width=device-width, initial-scale=1">
Häufige Fehler
- Das Tag fehlt, sodass Smartphones die Desktop-Breite herunterskalieren.
- Zoomen ist mit
user-scalable=nogesperrt. initial-scalesteht unter 1 und löst die Tap-Verzögerung aus.
Quellen
- <meta name="viewport"> – MDN Web Docsdeveloper.mozilla.org
- Document has a viewport meta tag – Lighthouse, Chrome for Developersdeveloper.chrome.com
- Best Practices für mobile Websites und die Mobile-First-Indexierung – Google Search Centraldevelopers.google.com
Stand: