CSS-Viewport

Das CSS-Viewport-Modul ermöglicht die Festlegung der Größe, des Zoomfaktors und der Ausrichtung des anfänglichen, enthaltenen Blocks des Benutzeragenten, oder Viewport.

Inhalte, die für große Viewports gestaltet sind, können eine Vielzahl von Fehlern aufweisen, wenn sie in kleineren Viewports betrachtet werden. Dazu gehören ungewolltes Umbrechen, abgeschnittene Inhalte und falsch dimensionierte Scroll-Container. HTML bietet ein Viewport-Meta-Tag, <meta name="viewport">, um Hinweise zur anfänglichen Größe des Viewports zu geben. Wenn die Website nicht für kleine Viewports optimiert ist und dieses Tag weggelassen wird, rendern einige mobile Browser die Website mit einer festen Anfangsbreite des enthaltenen Blocks, typischerweise 980px. Der Inhalt wird dann verkleinert, wodurch die CSS-Pixelgröße kleiner als ein tatsächlicher Pixel wird. Die resultierende Seite passt in den verfügbaren Bildschirmraum, ist jedoch unleserlich, was den Benutzer zwingt, zu zoomen und zu schwenken, um den Inhalt zu betrachten.

Der Viewport anfänglich enthaltene Block für kontinuierliche Medien hat die Abmessungen des Viewports. Da der Viewport in der Regel nicht größer als das Display ist, präsentieren Geräte mit kleineren Displays, wie Telefone oder Tablets, typischerweise einen kleineren Viewport als größere Geräte wie Desktops oder Laptops.

Referenz

Eigenschaften

zoom

Viewport-Konzepte: Das Konzept des Viewports — was es ist, seine Auswirkungen in Bezug auf CSS, SVG und mobile Geräte — und der Unterschied zwischen dem visuellen Viewport und dem Layout-Viewport.
Verwendung von Umgebungsvariablen: Ein Überblick darüber, was Umgebungsvariablen sind, browserdefinierte Umgebungsvariablen und wie man die env()-Funktion verwendet.
Verwendung der Viewport-Segmente-API: Erstellen Sie responsive Designs, die für unterschiedliche Größen und Anordnungen von Viewport-Segmenten mit der API und Umgebungsvariablen optimiert sind.