Das Viewport Meta Tag ist die Meta-Angabe, die festlegt, wie breit eine Seite auf mobilen Geräten dargestellt wird. Ohne sie tun mobile Browser so, als wäre der Bildschirm rund 980 Pixel breit, und verkleinern die fertige Seite anschließend auf Briefmarkengröße.
- Viewport Meta Tag
Meta-Angabe, die festlegt, wie breit eine Seite auf mobilen Geräten dargestellt wird.
Beispiel: „Ohne Viewport Meta Tag erscheint die Seite auf dem Smartphone weit herausgezoomt.“Auch: Viewport-Tag. Die Angabe steht im head und beginnt mit meta name="viewport". Sie wirkt auf Smartphones und Tablets; Desktop-Browser melden ihre Fensterbreite ohnehin richtig.
Abgrenzung zum Viewport: Der Viewport ist der sichtbare Ausschnitt des Browserfensters. Das Viewport Meta Tag ist die Angabe, mit der eine Seite diesem Ausschnitt ihre Breite mitteilt.
Was hineingehört
Zwei Angaben genügen und sind seit Jahren unverändert: die Gerätebreite als Seitenbreite und ein Anfangsmaßstab von eins. Alles Weitere ist in den allermeisten Fällen überflüssig.
<meta name="viewport" content="width=device-width, initial-scale=1">Die übrigen Parameter und ihre Wirkung beschreibt die MDN-Anleitung zum Viewport-Element, inklusive der Angaben für randlose Darstellung auf Geräten mit Aussparung im Bildschirm.
Warum maximum-scale dort nichts zu suchen hat
Die Parameter maximum-scale und user-scalable verhindern, dass sich die Seite mit zwei Fingern vergrößern lässt. Sie stammen aus einer Zeit, in der das Aufziehen Layouts zerlegte. Heute nehmen sie Menschen mit eingeschränktem Sehvermögen die einzige Vergrößerung, die ihnen bleibt.
Die Barrierefreiheitsrichtlinien verlangen eine Vergrößerung auf mindestens das Doppelte. Beide Parameter gehören deshalb aus dem Tag heraus; iOS ignoriert sie seit Version 10 ohnehin, Android-Browser nicht.
Woran es im Alltag hängt
Das Tag allein macht eine Seite nicht mobiltauglich. Es sagt dem Browser nur, dass er die wahre Breite melden soll. Erst damit greifen die Media Queries des Stylesheets, und erst dann entscheidet das Layout darüber, wie die Seite auf Smartphone und Tablet aussieht.
Der typische Fehlerfall ist ein zu breites Element, das trotz gesetztem Tag für waagerechtes Scrollen sorgt: ein festes Pixelmaß, eine lange Adresse ohne Umbruchmöglichkeit oder eine Tabelle. Das Tag ist dann richtig gesetzt, der Inhalt passt nur nicht.