Viewport vs screen resolution: the difference that breaks layouts

Screen resolution is the whole display. The viewport is the part your webpage actually gets — and the gap between them is bigger than people think. On a 1920 × 1080 laptop, a comfortable browser window with a bookmarks bar, tab strip, and taskbar might hand your page a viewport of 1600 × 850. On phones the browser chrome eats vertical space, and it collapses and expands as the user scrolls, which is why 'height of the screen' is a moving target on mobile.

Design to viewports, not devices

The practical error is designing to a device list — 'the iPhone breakpoint, the iPad breakpoint' — when the real input is a continuously variable viewport. Desktop users resize windows, snap them side by side, zoom to 110% (which shrinks the effective viewport), and dock dev tools. A layout tied to device widths shatters in all those cases; a layout that flexes between breakpoints doesn't care.

This is also why the CSS units exist in families: vw/vh track the viewport, the newer svh/lvh/dvh handle the mobile browser-chrome dance, and container queries let components respond to their own box instead of the whole window. The viewport is the contract; the screen is trivia.

See it live

The viewport readout on our homepage updates as you resize — drag your window and watch. If you develop, keep it open on a second monitor as a poor-man's breakpoint ruler. If you don't, it at least settles why 'my screen is 1920' and 'the site sees 1587' are both true.