UX / UI Kritische Auswirkung Einfach 2 Min.

Viewport / mobile Darstellung

Das Meta-Viewport sorgt für die korrekte Darstellung auf dem Handy.

Was es ist

Der Meta-Tag Viewport teilt dem Browser mit, wie die Seite auf die Gerätebreite skaliert werden soll. Ohne ihn rendert das Handy die Desktop-Breite und alles ist „klein und herausgezoomt“.

Warum es wichtig ist

Google indexiert mobile-first: es bewertet primär die mobile Version. Ohne korrekten Viewport fällt die Website beim Mobil-Usability-Test durch, was die Positionen direkt drückt, da die Mehrheit der Besuche von Handys kommt.

So geht's

1Füge in den <head> den Standard-Viewport-Meta-Tag ein.
2Verbiete den Zoom nicht (maximum-scale=1 / user-scalable=no), das schadet der Zugänglichkeit.
3Prüfe, dass der Inhalt nicht horizontal überläuft und Buttons groß genug sind (siehe UX-Audit).

Beispiel

Richtig

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

Fazit

Eine Zeile im Header, aber entscheidend für eine mobile-first-Welt. Ohne sie ist die Website auf dem Handy praktisch unbrauchbar und Google bestraft das hart. Teste nach dem Deployment an einem echten Telefon und im Mobil-Usability-Tool.

Verwandte Themen