Wozu dient das Viewport in der Webentwicklung?

Der Viewport ist der sichtbare Bereich einer Webseite im Browser. Er bestimmt die Größe und den Maßstab des Inhalts, der dem Benutzer angezeigt wird. Ohne ihn könnten Seiten auf verschiedenen Geräten, von Desktops bis Smartphones, nicht korrekt dargestellt werden.

Seine Hauptfunktion ist die Anpassung des Seitenlayouts an die Bildschirmgröße des Geräts. Mit dem Meta-Tag viewport kann man die Breite und den Zoom des Inhalts steuern.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width: Legt die Breite des Viewports auf die Breite des Geräts fest.
• initial-scale=1.0: Legt den anfänglichen Zoomfaktor beim Laden der Seite fest. Die Einheit bedeutet keinen Zoom (100%).

Die Verwendung von viewport ist eng mit Technologien des responsiven Designs verbunden, wie CSS-Medienabfragen, die es ermöglichen, unterschiedliche Stile je nach Größe des Viewports anzuwenden.