Your browser does not know how big your screen is

There is a number in every browser that looks exactly like a measurement of your display, and is not one. window.devicePixelRatio reports 2 on a retina laptop, 3 on most phones, 1 on an older monitor, and developers reach for it constantly to reason about physical size. It cannot tell you that. It was never measuring it.

What the ratio actually reports

Device pixel ratio is the number of physical device pixels used to paint one CSS pixel. That is a rendering fact, decided by the operating system’s scaling policy, and scaling policy is chosen for legibility — for text that is comfortable to read at a typical viewing distance — not for physical accuracy.

The consequence catches people out: two 27-inch monitors of identical resolution and identical density can report different ratios, because their owners picked different scaling settings. One person runs 100% and gets a ratio of 1. The other runs 150% for tired eyes and gets 1.5. The glass is the same. The panel is the same. The number the browser hands you is different.

Run it the other way and the failure is clearer still. A ratio of 2 does not mean 192 PPI. It means the platform decided to back each CSS pixel with four device pixels. A 13-inch laptop at 2× is around 227 PPI. A 32-inch 4K monitor at 2× is around 138. Same ratio, densities forty per cent apart.

Why there is no better API

Browsers deliberately do not expose physical screen dimensions. Partly it is fingerprinting — exact panel size is a strong identifying signal — and partly it is that the platform often does not know either: an external display reports whatever its EDID block claims, and cheap panels lie.

So the specification hands you a reference instead of a measurement. CSS fixes one inch at 96 pixels by definition, and every absolute unit follows from that. It is a conversion constant, and treating it as a fact about your hardware is the same mistake as treating the pixel ratio as a density.

The one job that genuinely needs your real density

Almost everything in interface work should use rem, em, %, ch and viewport units, which respond to the user’s own settings. There is one exception where the physical number matters:

Drawing something that must appear life-size. A ruler, a credit card for a card-entry form, a print preview at 1:1, a jewellery or watch listing where scale is the whole point. Size those by the viewer’s measured PPI and they are right; size them at 96 and they are wrong by whatever margin that display happens to differ — which across ordinary hardware runs from roughly 90 to 460 PPI.

There is no automatic way to get that number, which is why the honest implementations ask. Show a slider and a familiar object, let the visitor match it against a real card, and store what they land on. It feels crude and it is the only approach that is actually correct.

Getting the number

Your display’s real density comes from two figures you already have — the resolution and the advertised diagonal — and the screen PPI calculator works it out, along with the dot pitch and the visible width and height in inches. If you want the arithmetic behind it, or the reason density and resolution are not the same thing, What Is PPI? sets both out.

Keep the two ideas apart and the confusion dissolves: the pixel ratio is a rendering decision, your PPI is a physical fact, and only one of them is a measurement.