viewport meta tag

The viewport meta tag tells mobile browsers how to size the visual viewport relative to the device's physical pixels. Without it, mobile browsers assume the page was designed for a 980-pixel-wide desktop viewport and scale the entire layout down to fit -- making text microscopic and forcing users to pinch-zoom.

The standard responsive declaration:

<meta name="viewport" content="width=device-width, initial-scale=1">

What each value does:

• width=device-width -- match the viewport width to the device's screen width in CSS pixels. The default-and-only sane choice for responsive design.
• initial-scale=1 -- start at 100% zoom (the page renders at its natural size). Anything lower simulates a wider viewport; higher zooms in.
• maximum-scale -- cap on how far the user can zoom. Setting maximum-scale=1 (or user-scalable=no) is a WCAG 1.4.4 violation; users with low vision can't pinch-zoom to read.
• user-scalable=no -- the explicit "disable zoom" form. Same accessibility violation as max-scale=1.
• viewport-fit=cover -- on iPhone X+, lets the page draw into the notch / home-indicator safe-area edges. Pair with env(safe-area-inset-*) CSS to position critical UI inside the inset.
• interactive-widget (newer) -- controls how the visual viewport responds to the on-screen keyboard appearing. resizes-content is the default; overlays-content keeps the layout viewport stable.

Common bugs:

• Missing entirely -- mobile UX falls back to 1990s-era 980px-scaled rendering.
• user-scalable=no -- accessibility failure; modern browsers (iOS 10+) ignore this anyway, but it's a bad-faith signal.
• maximum-scale=1 -- same.
• No viewport-fit=cover on a notched-device-targeted PWA -- content sits inside the inset rectangle, looks letterboxed.

The 95% answer for any new site: ship width=device-width, initial-scale=1 and add viewport-fit=cover if you target iPhone X+ with edge-to-edge content.