Der Viewport ist der sichtbare Ausschnitt einer Website im Browserfenster, also der Bereich, den ein Besucher ohne Scrollen sieht. Seine Größe hängt vom Gerät ab: Auf einem Smartphone ist er klein und hochkant, auf einem Desktop-Monitor groß und breit.
Weil der Viewport so unterschiedlich ausfällt, bildet er die Grundlage für Responsive Design. Über eine spezielle Angabe im Quelltext, das Viewport-Meta-Tag, wird dem Browser mitgeteilt, dass die Seite sich an die jeweilige Breite anpassen soll.
Warum der Viewport wichtig ist
- Er bestimmt, was im sichtbaren Bereich oberhalb des Falzes erscheint
- Er ist die Bezugsgröße für flexible Layouts
- Eine korrekte Angabe verhindert eine verkleinerte Mobilansicht
Ein richtig konfigurierter Viewport ist damit eine technische Voraussetzung dafür, dass Ihre Website auf jedem Gerät gut aussieht.