What screen resolution means
Screen resolution is the physical pixel grid reported by your device, such as 1920 × 1080, 2560 × 1440, or 1536 × 864. It is useful when checking screenshots, external displays, and operating-system display settings, but it is not always the value your website uses for layout.
What viewport size means
Viewport size is the live browser area available to CSS and JavaScript. A laptop can have a high physical resolution while the website sees a smaller CSS viewport because of browser width, zoom, OS scaling, device pixel ratio, or responsive testing mode.
Which value should developers use?
For responsive CSS, use viewport width and height first. Breakpoints, sticky elements, full-height sections, and layout bugs usually respond to viewport size. Screen resolution is still useful context, especially when reporting QA issues or comparing displays.
Best practice for QA reports
When reporting layout bugs, copy screen resolution, viewport size, DPR, browser, operating system, orientation, and zoom/scaling note together. This gives developers both the physical display context and the CSS layout context.
Quick comparison table
Use this table when deciding which value belongs in a design note, bug report, or responsive CSS test.
| Metric | What it tells you | Use it for |
|---|---|---|
| Screen resolution | Physical display pixel grid. | Screenshots, monitor settings, display context. |
| Viewport size | CSS area available to the page. | Breakpoints, layout bugs, QA reproduction. |
| DPR | Physical pixels per CSS pixel. | Sharp images, retina assets, scaling context. |