Ein Viewport ist der sichtbare Bereich, beziehungsweise das Fenster, einer Website auf einem Bildschirm oder Gerät. In der Webentwicklung und dem responsiven Webdesign ist der Viewport ein wichtiger Begriff, da er die Basis für die Anpassung des Layouts und der Größe von Inhalten auf verschiedenen Bildschirmgrößen bildet.
Welche Arten von Viewports gibt es?
Es wird zwischen zwei Haupttypen von Viewports unterschieden
Layout-Viewport
Der Layout-Viewport definiert den gesamten verfügbaren Bereich des Bildschirms, auf dem die Webseite dargestellt werden kann. Dieser Bereich kann größer sein als der sichtbare Bildschirmbereich, insbesondere auf mobilen Geräten mit hoher Pixeldichte. Die Größe des Layout-Viewports kann durch den Benutzer verändert werden, z.B. durch Zoomen oder Drehen des Bildschirms.
Visual-Viewport
Der Visual-Viewport bezeichnet den tatsächlich sichtbaren Bereich des Bildschirms, der für den Benutzer ohne Scrollen oder Zoomen sichtbar ist. Dieser Bereich variiert je nach Bildschirmgröße, Ausrichtung und Zoomstufe des Geräts. Das responsives Webdesign berücksichtigt den Visual-Viewport, um sicherzustellen, dass Inhalte angemessen skaliert und angeordnet werden, um auf verschiedenen Bildschirmgrößen und -auflösungen optimal dargestellt zu werden.
Die Berücksichtigung des Viewports ist entscheidend, um sicherzustellen, dass eine Webseite auf verschiedenen Geräten und Bildschirmgrößen eine optimale Benutzererfahrung bietet. Durch die Anpassung des Layouts und der Größe von Inhalten an den Visual-Viewport können Entwickler sicherstellen, dass Benutzer Inhalte ohne Probleme sehen und nutzen können, unabhängig von ihrem Gerät oder ihrer Bildschirmgröße.