Device Pixel Ratio Test

A CSS pixel is not a physical pixel. When you write width: 200px, you are asking for 200 units of a logical coordinate system, and the browser decides how many real screen pixels that covers. The device pixel ratio is that decision, expressed as a number.

At a ratio of 1, one CSS pixel is one physical pixel. At 2, the browser draws two physical pixels for every CSS pixel in each direction, so a 400 × 300 CSS box occupies 800 × 600 physical pixels. This is why the same page looks sharp on one laptop and soft on another: the display has more pixels to spend, and the browser spends them.

Three figures describe your display, and they interlock. The CSS size is what screen.width reports — for a 4K monitor at 200% scaling, that is 1920 × 1080, not 3840 × 2160. The physical size is the real panel resolution, and it is recovered by multiplying the CSS figure by the ratio. The viewport is the part of that space the browser gives to the page, after toolbars and window chrome are taken out.

A worked example from a typical machine: a 4K panel at 200% scaling gives screen.width of 1920 with a ratio of 2, so the physical width is 1920 × 2 = 3840, which matches the panel. A 1080p laptop at 125% scaling reports 1536 × 864 CSS pixels with a ratio of 1.25, which multiplies back to the 1920 × 1080 the panel actually has. If the multiplication does not land on a whole number, you are looking at fractional scaling, and the grid in the ruler reveals it as unevenly spaced lines.

Zoom is applied on top of display scaling rather than instead of it, which is why the ratio climbs in steps that do not look like zoom levels. On a display with a base ratio of 1, zooming the page to 150% reports a ratio of 1.5. On the same machine with a 200%-scaled 4K monitor, the base ratio is already 2, so the same 150% zoom reports 3.

Watch the number above while pressing Ctrl and the plus key — or Command and plus on macOS — and it should move with each step. The viewport gets smaller at the same time, because zooming in leaves fewer CSS pixels to fill the same glass. Both effects are visible in the panel, which is why it re-measures on every resize event rather than only on load.

There is no web API that separates your operating-system scaling from your browser zoom. Both multiply into the same figure, so a ratio of 1.5 could be a 150%-scaled display at 100% zoom, or a standard display at 150% zoom, and a page cannot tell the difference. Anything claiming to report your exact zoom level is inferring, not measuring.

The value is also rounded. The CSS specification lets browsers quantise devicePixelRatio to blunt its use as a fingerprint, so Chromium reports a stabilised figure rather than the raw one. The number is therefore close to the truth but not exact, and comparing it across browsers will show small discrepancies in the last digits. Treat it as a reliable indication of your scaling class — standard, high density or fractional — rather than a precise measurement.

The ratio is one of the values a page reads before it renders anything, because it decides whether to serve a standard image or a high-density one. That is its honest purpose, and it is genuinely useful. It is also a signal in a fingerprint, since a ratio of 1.25 or 1.75 is far less common than a clean 1 or 2.

On its own it proves nothing. Combined with the physical screen size, the viewport and the window dimensions, though, it describes the specific panel and window you are using, which is a much smaller group. The browser fingerprint test shows how much each of these signals adds, and the dark mode and display test covers the capabilities the same panel reports.