web dev//frontend//layout//viewport

The viewport is the rectangular area of the browser window where content is visible: everything the user can see without scrolling fits inside it. Its dimensions drive responsive design, media queries and viewport-relative units.

The viewport is the rectangular area of the browser window where content is visible: everything the user can see without scrolling fits inside it. Its dimensions drive responsive design, media queries and viewport-relative units.

The tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> tells mobile browsers to match the viewport width to the device screen instead of defaulting to a desktop layout of about 980 px. Without it, the page renders at desktop width and gets scaled down to fit, making everything tiny.

The layout viewport and the visual viewport are two different areas. The layout viewport is the full area the page is rendered into (controlled by the meta tag); the visual viewport is the portion the user actually sees, which shrinks when the user pinch-zooms in. On desktop they are usually identical; on mobile, pinch-zoom separates them.

The viewport units vw (1% of the viewport width) and vh (1% of its height) have a problem on mobile: 100vh includes the address bar area, so content overflows when the bar is visible.

The dynamic viewport units (CSS spec 2022) solve it. dvh (dynamic viewport height) adjusts as the mobile browser chrome appears and disappears, svh (small) assumes the chrome is visible and lvh (large) assumes it is hidden; dvh is what most people actually want when they write 100vh.

window.innerWidth and window.innerHeight give JS access to the visual viewport dimensions, which change on resize, orientation change and zoom.