Viewport vs screen resolution: the difference that breaks layouts
Your screen is 1920 wide but your website gets 1050. Where the pixels go, and why designing to "screen sizes" is subtly wrong.
By Noble Erne, LLC · 4 min read · Reviewed July 2026
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.
Published by Noble Erne, LLC. Enterprise systems consultant with a background in SAP implementation, software documentation, and instructional design. Builds the tools and writes the explainers on this site. Corrections to this guide go to the contact page and are reviewed before publication.
Related guides
- The screen sizes that actually matter in 2026
Forget the 50-row resolution charts. A handful of sizes cover most of the web’s traffic — here they are, and how to think about the rest. - Device pixel ratio: why your 4K phone reports 390 pixels
Physical pixels, CSS pixels, and the 2×/3× multiplier between them — the concept that explains most "why is my image blurry" mysteries. - How to choose responsive breakpoints (without cargo-culting)
768 and 1024 are fossils of the 2010 iPad. Let content decide where your layout bends, with a sane default set if you must have numbers.