A Guide to Screen Resolution and Responsive Design
"What resolution is this screen?" has three different correct-sounding answers depending on which number you mean — and mixing them up is a common source of confusion when debugging why a design looks different across devices.
Three related but different numbers
- Screen resolution is the physical pixel count of the display itself (e.g. 2560×1440).
- Viewport size is the visible area available to a webpage within the browser window, which is smaller than the full screen once toolbars, other windows, or browser chrome are accounted for.
- Device pixel ratio (DPR) describes how many physical pixels correspond to one CSS pixel — a high-DPI ("Retina") display might use a ratio of 2 or 3, meaning content is rendered at a higher physical resolution than the CSS dimensions suggest.
Why this matters for responsive design
Responsive design decisions — breakpoints, image sizing, font scaling — should generally target viewport size and DPR, not raw screen resolution, since that's what actually determines how much space a webpage has to work with and how sharp images need to be. Serving an image sized for a 2560px-wide screen resolution to a browser with a 1280px viewport just wastes bandwidth.
A common mistake: designing for exact device sizes
New device sizes launch constantly, making it impractical to design pixel-perfect layouts for every specific device. Modern responsive design instead uses flexible breakpoints and relative units, adapting smoothly across a range of viewport sizes rather than targeting exact numbers.
Frequently asked questions
Because raw screen resolution alone doesn't determine layout — high-DPI phone screens often have a device pixel ratio above 1, meaning the CSS viewport is much smaller than the physical pixel count suggests.
It's more effective to test a range of viewport widths using browser resize/responsive mode, since new device sizes are constantly introduced and a flexible layout should handle the range, not just specific known devices.