CSS-Viewport

Das CSS-Viewport-Modul ermöglicht es, die Größe, den Zoomfaktor und die Ausrichtung des initialen umschließenden Blocks des User-Agents, oder Viewport, festzulegen.

Inhalte, die für große Viewports gestaltet sind, können bei der Ansicht in kleineren Viewports verschiedene Probleme aufweisen, darunter unbeabsichtigtes Umbruchverhalten, abgeschnittene Inhalte und falsch dimensionierte Scroll-Container. HTML stellt ein Viewport-Meta-Tag, <meta name="viewport">, zur Verfügung, um Hinweise über die anfängliche Größe des Viewports zu geben. Wenn die Seite nicht für kleine Viewports optimiert ist und dieses Tag weggelassen wird, rendern einige mobile Browser die Seite mit einer festen Breite des initialen umschließenden Blocks, typischerweise 980px. Die Inhalte werden dann verkleinert, was dazu führt, dass die CSS-Pixelgröße kleiner als ein tatsächlicher Pixel ist. Die resultierende Seite passt zwar in den verfügbaren Bildschirmraum, ist jedoch unleserlich, wodurch der Benutzer zoomen und schwenken muss, um die Inhalte zu sehen.

Der Viewport initiale umschließende Block für kontinuierliche Medien hat die Dimensionen des Viewports. Da der Viewport im Allgemeinen 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 im Hinblick auf CSS, SVG und mobile Geräte — und der Unterschied zwischen dem visuellen Viewport und dem Layout-Viewport.
Verwenden von Umgebungsvariablen: Ein Überblick darüber, was Umgebungsvariablen sind, browserdefinierte Umgebungsvariablen und wie die env()-Funktion verwendet wird.
Verwenden der Viewport-Segmente API: Erstellen von responsiven Designs, die für verschiedene Viewport-Segmentgrößen und -anordnungen mit der API und Umgebungsvariablen optimiert sind.