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.