Viewport

Viewport bezeichnet den sichtbaren Bereich einer Webseite auf dem Bildschirm eines Geräts – also den Bereich, den ein Nutzer ohne zu scrollen sehen kann. Der Viewport unterscheidet sich je nach Endgerät stark: Ein Desktop-Monitor hat einen viel größeren Viewport als ein Smartphone. Das Viewport-Meta-Tag in der HTML-Kopfzeile steuert, wie Browser die Seite rendern, besonders auf mobilen Geräten. Google bewertet explizit, ob eine Website eine korrekt konfigurierte Viewport-Einstellung hat, da dies entscheidend für die Mobile Usability ist.

Technisch wird der Viewport über das Meta-Tag \“ definiert. Dieses Tag teilt dem Browser mit, dass er die Seitenbreite an die Gerätebreite anpassen soll. Ohne dieses Tag interpretiert ein Smartphone die Seite oft als großformatig, zoomt heraus und macht Text unleserlich. Das richtig konfigurierte Viewport erlaubt es, den Inhalt so zu strukturieren, dass er auf kleinen Bildschirmen optimal angezeigt wird – Responsive Design funktioniert also nur mit korrektem Viewport. Google berücksichtigt die Viewport-Konfiguration als Teil der Mobile Usability beim Ranking.

In der Praxis sollte jede Website die Standard-Viewport-Einstellung verwenden: width=device-width, initial-scale=1 ohne user-scalable=no, da das Zoom-Verbot die Barrierefreiheit verschlechtert. Beim Testing ist das wichtigste Werkzeug der Chrome DevTools: Mit der Taste F12 kann man verschiedene Bildschirmgrößen simulieren und prüfen, ob Inhalte korrekt umfließen. Besonderes Augenmerk sollte auf Touch-Targets (Buttons, Links) gelten – sie sollten mindestens 48 Pixel groß sein. Eine gut konfigurierte Viewport ist die Grundlage für Mobile-First-SEO und trägt direkt zur Page Experience bei.