This article explains the concept of the viewport — what it is, its impact in terms of CSS, SVG, and mobile devices — and differentiates between the visual viewport and the layout viewport. By mozilla.org.
Viewport refers to the visible area of a document on a screen, excluding UI elements like toolbars. Its size depends on factors such as screen size, fullscreen mode, and zoom level. The viewport can be divided into two types: layout viewport (the full visible area, including fixed elements) and visual viewport (the currently visible portion on the screen).
The layout viewport is influenced by CSS properties like padding and margins, while the visual viewport adjusts when users scroll or zoom. Developers use DOM properties like clientWidth and innerWidth to access the layout viewport size, which changes during zooming. The visual viewport may shrink when zoomed or scrolled but remains linked to the layout viewport.
In CSS, media queries and units like vw (1% of layout viewport width) and vh (1% of height) are based on the layout viewport. SVG viewports are set by attributes like height and width, with media queries applying styles based on their container size. For mobile devices, the viewport is typically adjusted using a meta tag to ensure proper rendering.
JavaScript’s Visual Viewport API allows programmatic control over the visual viewport. Developers must consider both layout and visual viewports when designing responsive web pages, especially for mobile browsers where the viewport can be scaled or zoomed by users. Nice one!
[Read More]