Was ist ein Viewport?

Der Viewport ist der sichtbare Anzeigebereich einer Website im Browser-Fenster. Er ist genau so groß wie das Browser-Fenster selbst und variiert je nach Gerät und Bildschirmgröße: auf einem Smartphone kleiner als auf einem Desktop-Monitor.

Das klingt offensichtlich, hat aber technische Implikationen. Frühe Smartphones hatten ein Problem: Sie stellten volle Desktop-Websites auf einem kleinen Bildschirm dar, indem sie die Seite herauszoomen, bis sie ins Fenster passte. Das machte Texte unleserlich klein. Die Lösung war das Viewport-Meta-Tag.

Das Viewport-Meta-Tag und seine Bedeutung

Das Viewport-Meta-Tag ist eine einzeilige Anweisung im HTML-Head jeder mobilen Website: <meta name="viewport" content="width=device-width, initial-scale=1">. Diese Zeile teilt dem Browser mit: Nutze die natürliche Breite des Geräts als Viewport, nicht eine simulierte Desktop-Breite.

Ohne dieses Tag behandelt ein mobiler Browser eine Website so, als wäre sie für einen 980 Pixel breiten Desktop gebaut, und skaliert alles herunter. Mit dem Tag weiß der Browser, dass er die Seite für 375 oder 390 Pixel (typische Smartphone-Breiten) darstellen soll, und CSS-Breakpoints funktionieren korrekt.

Dieser winzige HTML-Schnipsel ist deshalb eine der grundlegenden Anforderungen für mobile-optimierte Websites. Google prüft ihn bei der Mobile-Friendly-Analyse. Fehlt er, ist eine Website technisch nicht als mobilfreundlich klassifiziert, was negative SEO-Auswirkungen haben kann.

Der Begriff Viewport hat außerdem Bedeutung in CSS. Mit den CSS-Einheiten vw (Viewport Width) und vh (Viewport Height) lassen sich Größen relativ zum sichtbaren Bereich definieren. 100vw bedeutet: so breit wie der gesamte sichtbare Bereich. 50vh bedeutet: halb so hoch wie der sichtbare Bereich. Das ermöglicht flexible Layouts, die sich automatisch an verschiedene Bildschirmgrößen anpassen.

Ein häufiges Problem mit 100vh auf mobilen Geräten: Die Browser-Toolbar, die sich beim Scrollen versteckt und wieder erscheint, verändert die Viewport-Höhe dynamisch. Das kann zu unerwünschten Layout-Sprüngen führen. CSS bietet dafür die neueren Einheiten svh (small viewport height) und dvh (dynamic viewport height) an.

Wenn du Fragen zu Responsive Design oder mobiler Optimierung deiner Website hast, helfen wir dir weiter. Schau dir unsere Webdesign-Leistungen an oder buche einen Termin.