Definition: Viewport
Was bedeutet: Viewport
Der Viewport ist der sichtbare Bereich einer Webseite im Browserfenster. Er variiert je nach Endgerät: Auf einem Desktop-Monitor ist der Viewport meist das gesamte Browserfenster, auf einem Smartphone entspricht er dem Display des Geräts.
Die Definition des Viewports ist im Zeitalter des mobilen Internets essenziell geworden. Man muss sich den Viewport wie ein Fenster vorstellen, durch das man auf die Inhalte einer Webseite blickt. Da Webseiten früher oft nur für breite Desktop-Bildschirme konzipiert waren, „erfanden“ Smartphones einen virtuellen Viewport, um die riesigen Seiten auf den kleinen Bildschirmen anzuzeigen – das Ergebnis war winziger, unlesbarer Text.
Damit eine moderne Website heute korrekt dargestellt wird, nutzen wir den sogenannten Viewport Meta-Tag. Dieser Code-Schnipsel im Kopfbereich der Website weist den Browser an, die Breite der Seite exakt an die Breite des physischen Geräts anzupassen und den Zoom-Faktor auf 100 % zu setzen. Erst dadurch wird Responsive Design möglich, da die Website nun „weiß“, wie viel Platz ihr tatsächlich zur Verfügung steht.
FAQ - Häufig gestellten Fragen zum Begriff: Viewport
Was ist der Unterschied zwischen der Bildschirmauflösung und dem Viewport?
Die Bildschirmauflösung gibt an, wie viele physische Pixel ein Display hat (z. B. ein Retina-Display). Der Viewport hingegen arbeitet mit „logischen Pixeln“. Ein modernes Smartphone hat zwar oft eine extrem hohe Auflösung, der Viewport ist jedoch deutlich kleiner definiert, damit Texte und Buttons eine angenehme, bedienbare Größe behalten.
Warum ist der Viewport-Meta-Tag so wichtig?
Ohne diesen Tag würde ein Smartphone versuchen, die Desktop-Version der Website anzuzeigen und sie so weit herauszuzoomen, dass sie auf den kleinen Bildschirm passt. Das führt dazu, dass Nutzer mühsam mit den Fingern heranzoomen müssen, um etwas zu lesen – ein K.-o.-Kriterium für die Nutzerfreundlichkeit.
Was bedeuten die Einheiten vw und vh?
Im modernen Webdesign nutzen wir oft relative Einheiten statt fester Pixel. 100vw (Viewport Width) entspricht 100 % der Breite des sichtbaren Bereichs. 100vh (Viewport Height) entspricht 100 % der Höhe des sichtbaren Bereichs. Dies hilft uns, Elemente (wie z. B. ein Hero-Bild) exakt so groß zu machen, dass sie genau den Bildschirm ausfüllen, egal wie groß dieser ist.
Hat der Viewport Einfluss auf SEO?
Indirekt ja. Google prüft im Rahmen der “Mobile Friendly”-Tests, ob der Viewport korrekt gesetzt ist. Wenn Inhalte breiter sind als der Viewport (horizontales Scrollen), wird dies als Fehler gewertet und verschlechtert das Ranking in der mobilen Suche.