The short version
Your operating system reports a display resolution, while a browser reports a CSS viewport and device pixel ratio. Multiplying CSS dimensions by DPR can approximate backing pixels, but browser zoom, UI and multi-monitor behavior can affect the result.
What matters most
- Browser viewport is the usable page area, not the full monitor.
- DPR connects CSS pixels with device or backing pixels.
- The operating system's display panel is the authoritative place for configured resolution.
How to apply it
- Open system display settings and identify the selected monitor.
- Read the current and recommended resolution.
- Check scaling percentage and browser zoom.
- Use a viewport tool when testing website layout, not as a replacement for system display information.
Reference table
| Measurement | Where to find it | Meaning |
|---|---|---|
| Configured resolution | System display settings | Desktop pixel grid |
| Native resolution | Monitor specifications | Physical panel grid |
| Viewport | Browser measurement | Usable CSS page area |
| DPR | Browser measurement | Backing pixels per CSS pixel |
Use exact dimensions and units in production notes; familiar labels can describe more than one standard.
How to check your monitor resolution
In Windows, open Settings, choose System, then Display, select the correct monitor and read Display resolution. The option marked Recommended normally corresponds to the display's native mode. Also record the Scale setting because it changes the logical size of text and apps.
On macOS, open System Settings and choose Displays, then select the display and inspect the resolution or scaling choices. Some modes are described with a ‘looks like’ workspace size rather than exposing every backing pixel directly. Use the monitor model specification when you need the physical panel matrix.
Why a browser reports a different size
A browser viewport is the rectangle available to the web page after tabs, address bars, sidebars and other interface elements are removed. Its width and height are usually expressed in CSS pixels, so it is expected to be smaller than the desktop resolution.
The browser's screen values are useful for responsive-layout testing, but they are not guaranteed hardware specifications. Operating-system scaling, page zoom, privacy protections, multiple displays and browser behavior can affect the numbers. Use system settings when the question is about the monitor; use viewport values when the question is about a webpage.
Device pixel ratio explained with an example
Device pixel ratio compares display or backing pixels with CSS pixels. At DPR 2, a 500-CSS-pixel-wide canvas may need a 1000-pixel backing buffer to remain crisp. This is why a high-density screen can report a logical width that is smaller than its physical pixel count.
Multiplying viewport dimensions by DPR gives a useful approximation for rendering work, but it is not a guaranteed way to identify the exact monitor. Page zoom can change devicePixelRatio, and moving a browser between displays can change it again. Responsive designs should react to the viewport rather than guess the user's hardware.
Troubleshoot a wrong or missing resolution
First select the correct display in system settings and confirm that mirroring is not forcing both monitors into a shared mode. Then check the cable, adapter, dock, input port and graphics driver. Each link must support the intended resolution and refresh rate.
If text is too small, keep the native resolution and increase interface scaling before lowering resolution. If the recommended mode is absent, consult the monitor and computer specifications. A website cannot repair or definitively diagnose a hardware connection from browser values alone.
Common mistakes to avoid
- Calling the browser viewport the monitor resolution.
- Forgetting which monitor is selected in a multi-display setup.
- Interpreting scaling percentage as a change to the physical panel.
Continue with the right tool
Use a calculator to check the numbers against your own source and destination instead of relying on a generic preset.
Related guides
Monitor Resolution Explained: Pixels, Scaling and Aspect Ratio
Understand monitor resolution, native pixels, operating-system scaling and how to choose a usable desktop setup.
Displays and monitorsMonitor Resolution Chart: HD, QHD, 4K, Ultrawide and 5K
Compare common monitor resolutions by exact dimensions, pixel count and aspect ratio for productivity, design and gaming workflows.
Displays and monitors1080p vs 1440p: Pixel Count, Sharpness and GPU Load
Compare Full HD and QHD monitor resolutions by pixels, scaling, performance and practical screen-size considerations.
Frequently asked questions
Why is my viewport smaller than my screen?
Browser chrome, scrollbars and operating-system UI consume space, and CSS pixels may be scaled.
Can a website detect exact physical resolution?
It can read browser-exposed values, but privacy, zoom and scaling mean they should not be treated as guaranteed physical specifications.
Why does 4K show a 1920-wide CSS layout?
At DPR 2, 1920 CSS pixels can map to 3840 backing pixels.
Sources and further reading
These references support the technical definitions and platform-specific guidance used above.
- Microsoft: display resolution and scalingOfficial Windows steps and guidance on using the recommended resolution.
- MDN: devicePixelRatioBrowser reference for CSS-to-display pixel density and zoom behavior.