Was das Viewport-Tag macht
Das Viewport-Tag sagt Smartphones, dass sich die Seite an die Breite des Bildschirms anpasst. Ohne es zeigen sie die Seite verkleinert wie auf einem Desktop.
So funktioniert es
Smartphone-Browser stammen aus einer Zeit, in der Websites nur für große Bildschirme gebaut wurden. Ohne weitere Angabe tun sie deshalb so, als wäre der Bildschirm rund 980 Pixel breit, und verkleinern die Seite auf die Breite des Handys. Die Schrift wird winzig, man muss zoomen und seitlich wischen.
Das Viewport-Tag im Kopf der Seite schaltet das ab:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width heißt: Die Seite ist so breit wie der Bildschirm. initial-scale=1 heißt: Beim Öffnen nicht vergrößern oder verkleinern. Erst damit greift ein responsives Layout, das sich per CSS an kleine Bildschirme anpasst.
Das Tag betrifft drei Bereiche, die bytereport getrennt prüft:
- Suche. Google bewertet Seiten nach ihrer mobilen Fassung. Ohne Viewport gilt eine Seite als nicht für Handys gemacht.
- Ladezeit. Ohne Viewport verzögern mobile Browser jeden Tipp, weil sie abwarten, ob ein zweiter zum Zoomen folgt. Mit
width=device-widthentfällt diese Verzögerung. - Barrierefreiheit. Menschen mit Sehschwäche vergrößern Seiten mit zwei Fingern. Die Viewport-Angabe darf das nicht sperren.
Worauf es ankommt
- Genau diese Zeile.
width=device-width, initial-scale=1ist alles, was eine Seite braucht. - Zoomen nicht sperren.
user-scalable=nound einmaximum-scaleunter 2 verhindern, dass Besucher die Seite vergrößern. Das verstößt gegen die WCAG (Erfolgskriterium 1.4.4, Text auf 200 % vergrößern). bytereport wertet beides als Fehler. - Responsives Layout. Das Tag allein macht eine Seite nicht mobiltauglich. Das Layout muss sich auch per CSS an schmale Bildschirme anpassen, siehe Was Reflow bei Vergrößerung bedeutet.
- Kein festes Pixelmaß. Eine feste Breite wie
width=1024bringt das Desktop-Problem zurück.
So richtest du es ein
Aktuelle Themes und Website-Baukästen setzen das Tag von selbst. Fehlt es oder sperrt es das Zoomen, steckt es in der Vorlage des Kopfbereichs, etwa header.php in WordPress. Ändere die Zeile dort auf:
<meta name="viewport" content="width=device-width, initial-scale=1">Hast du keinen Zugriff auf die Vorlagen, erledigt das deine Agentur oder wer das Theme pflegt.