Quick answer
What this guide helps you determine
Distinguish the CSS screen dimensions from the browser content area used by responsive layouts.
Begin with the observable browser result, repeat it under the same conditions, and change one connection, setting or application at a time. A browser result narrows likely causes but does not certify hardware or decide a repair.
Scope of this check
Screen resolution, CSS screen size and viewport size answer different questions. The viewport is the page’s current layout area after browser controls, side panels and zoom; screen values describe the browser-reported display in CSS pixels; physical panel pixels are not always exposed directly.
Step-by-step method
- Read screen and viewport values with the browser window on one display. Resize the window and observe the viewport change while the reported screen size remains stable.
- Toggle browser chrome or full screen and compare again. Change zoom only after recording the original state. Device pixel ratio helps explain approximate mapping between CSS and device pixels but can also respond to scaling and zoom.
- For responsive-design testing, use the live viewport dimensions. For hardware specifications, use operating-system display settings and manufacturer documentation rather than assuming CSS screen size is the panel’s native pixel matrix.
What to check first
Use these checkpoints to keep the comparison focused. Record the visible behavior rather than assigning a fault label too early.
- Screen size includes the reported display
- Viewport is the page layout area
- Browser chrome and zoom change the viewport
How to read what you see
| Observation | What it can suggest | Useful next check |
|---|---|---|
| Viewport changes when the window resizes | It represents the available page layout area. | Use it for responsive layout decisions. |
| Screen size is smaller than panel marketing resolution | Operating-system scaling maps multiple device pixels to CSS pixels. | Check devicePixelRatio and OS scaling. |
| Values change when moved to another monitor | The browser adopted that display’s size/scaling context. | Keep the window fully on the target display. |
Common mistakes to avoid
- Do not use viewport width as monitor resolution.
- Do not multiply by devicePixelRatio and call the result certified physical resolution.
- Do not ignore zoom and multi-monitor scaling.
Build evidence another person can use
Write down the exact action, visible result and whether it repeats. Include the browser family, operating-system family, connection type and the single comparison that changed the result. Quote the observation directly—for example, “Viewport changes when the window resizes”—then add where it occurred and which comparison changed it.
Change one condition per comparison and return settings that have no effect. Follow model-specific manufacturer instructions before firmware changes, cleaning, disassembly or warranty action.
When to seek qualified support
If the same problem remains in multiple applications and on another compatible connection or computer, collect the repeatable observations and contact the manufacturer or a qualified technician. Stop using equipment that is physically damaged, unusually hot, wet, sparking or unsafe. Device Test Bench cannot inspect electrical condition or make a repair decision.
Privacy during testing
Our public tests process key events, pointer values, media streams and controller input locally. Do not send private recordings, complete typed text or device identifiers when asking for help. A short description of the behavior, browser and page URL is normally enough.
Questions readers ask
Why is the viewport shorter than the screen?
Browser tabs, address bars, taskbars and window borders consume space outside the page layout area.
Which value should a web developer use?
Use viewport/container measurements and responsive CSS; screen hardware values are not a reliable layout target.
Primary technical references
The following specifications define the browser APIs discussed in this guide. They are primary web-platform references, not product repair manuals.