Viewport-Meta-Tag: So sieht deine Seite auf dem Handy richtig aus

Warum das wichtig ist

Smartphones tun ohne Anweisung so, als wären sie ein kleiner Monitor. Der Browser baut die Seite in etwa 980 Pixeln Breite auf und schrumpft sie dann aufs Display. Das Ergebnis kennst du: winzige Schrift, Links, die man nur mit gespreizten Fingern trifft, und ein Besucher, der nach ein paar Sekunden wieder weg ist.

Für Google ist die Handy-Fassung längst die maßgebliche. Der Crawler kommt als Smartphone, und was er dort sieht, wird bewertet. Eine Seite ohne Viewport-Tag ist also genau in der Version kaputt, auf die es ankommt. Wie gut sie am großen Bildschirm im Büro aussieht, spielt dafür keine Rolle.

Zur Einordnung: Der Tag allein macht noch keine Seite mobilfreundlich. Er schaltet nur die Gerätebreite ein. Ob Spalten untereinander rutschen und Bilder mitschrumpfen, regelt das CSS mit sogenannten Media Queries. Umgekehrt nützt das beste responsive CSS nichts, wenn die Zeile fehlt. Dann rechnet der Browser weiter mit 980 Pixeln, und die Regeln für kleine Bildschirme greifen nie.

So prüfst du es selbst

Den Mobile-Friendly-Test von Google gibt es seit Ende 2023 nicht mehr. Lighthouse in den Chrome-Entwicklertools meldet einen fehlenden Viewport aber weiterhin. Im kostenlosen Check sucht checkfrei den Tag automatisch: Fehlt width=device-width, ist das ein Fehler.

1. 01Öffne deine Seite im Browser, ruf mit Strg+U (Mac: Cmd+Option+U) den Quelltext auf und such mit Strg+F nach viewport.
2. 02Steht dort ein Meta-Tag mit width=device-width, ist die Grundlage da. Findest du zusätzlich user-scalable=no oder maximum-scale=1, ist das Zoomen gesperrt. Das ist ein eigenes Problem, mehr dazu unter Zoomen erlaubt.
3. 03Für den Praxistest öffnest du in Chrome die Entwicklertools mit F12 und schaltest mit Strg+Umschalt+M die Geräteansicht ein. Aussagekräftiger ist ein echtes Handy, am besten ein älteres mit kleinem Display.

So behebst du es

Diese eine Zeile gehört in den <head> jeder Seite. Mehr brauchst du nicht, und von weiteren Angaben wie maximum-scale rate ich ab.

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

import type { Viewport } from 'next';

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
};

Typische Fehler

• ·width=1024 oder eine andere feste Zahl statt device-width. Das ergibt wieder die Mini-Desktop-Ansicht, nur mit Absicht.
• ·user-scalable=no, um Layoutfehler beim Zoomen zu verstecken. Das sperrt Menschen mit Sehschwäche aus und taucht im Check als eigener Fehler auf.
• ·Zwei Viewport-Tags, etwa einer vom Theme und einer von einem Plugin. Browser nehmen dann in der Regel den letzten, und der ist nicht immer der richtige.