Der Viewport ist der sichtbare Bereich einer Webseite auf dem Bildschirm eines Geräts. Je nach Größe und Auflösung des Bildschirms kann sich der Viewport dynamisch anpassen. Besonders bei responsivem Webdesign spielt der Viewport eine zentrale Rolle, da er die Darstellung und Skalierung von Inhalten auf unterschiedlichen Geräten steuert. Um den Viewport zu definieren und Inhalte optimal darzustellen, wird das <meta>-Tag im HTML-Header verwendet. Ein typisches Codebeispiel für die Definition des Viewports ist:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: Passt die Breite des Viewports an die Gerätebreite an.
initial-scale=1.0: Setzt den Zoomfaktor auf den Standardwert von 1.
Die richtige Verwendung des Viewports sorgt dafür, dass Inhalte auf mobilen Geräten gut lesbar sind und keine unnötigen Scrollvorgänge erforderlich sind.