CSS-Viewport

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

Inhalte, die für große Viewports entworfen wurden, können in kleineren Viewports eine Vielzahl von Fehlern aufweisen, darunter unbeabsichtigte Zeilenumbrüche, 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 Seite nicht für kleine Viewports optimiert ist und dieses Tag weggelassen wird, rendern einige mobile Browser die Seite mit einer festen anfänglichen Breite des Containing Blocks, typischerweise 980px. Der Inhalt wird dann verkleinert, was die CSS-Pixelgröße kleiner als ein tatsächliches Pixel macht. Die resultierende Seite passt in den verfügbaren Bildschirmbereich, ist jedoch unleserlich, sodass der Benutzer zoomen und scrollen muss, um den Inhalt zu sehen.

Der Viewport Initial Containing Block für kontinuierliche Medien hat die Abmessungen 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.