Screen Resolution

Why there are two sets of numbers

A modern screen has more physical pixels than a web page is laid out against. A phone might have 1170 pixels across and present itself to a page as 390: three device pixels for every CSS pixel, so that text stays a readable size instead of shrinking to a third of it. The ratio between the two is the device pixel ratio, and it is why the same website looks the same size on screens with wildly different pixel counts.

That is also why the big number here is a multiplication rather than a measurement. The browser tells the page how many CSS pixels the screen is and what the ratio is; this page multiplies them. On most machines the result is exactly the resolution in the display settings. Where a system uses a fractional scale, the rounding can land a pixel out.

What changes these numbers

1. 1

   Browser zoom. Zooming in raises the device pixel ratio and shrinks the CSS size of the screen. The panel has not changed; the way the page is measured has.

2. 2

   Display scaling in the operating system does the same thing at a system level — the "150%" or "Looks like 1920 × 1080" setting.

3. 3

   Rotating a phone or tablet swaps width and height, and the report follows it immediately.

4. 4

   Moving the window to another screen changes every line, because these questions are always about the screen the window is on.

What a browser cannot tell you

It cannot tell you how big the screen is. There is no interface that reports a diagonal in inches, a make or a model, so nothing here is a physical measurement. If you want pixel density or a size in centimeters, those need one number from you — the screen's diagonal — which is what the PPI Calculator asks for, or a calibration, which is what the On-Screen Ruler does.

The color-depth line deserves its own warning. Most browsers answer 24 whatever the panel is, so it tells you what the browser reports and nothing about whether your screen is an 8-bit, 10-bit or HDR display. For the shape of the screen rather than its size, the Aspect Ratio Calculator reduces any two numbers to their ratio.

Resolution, PPI and Aspect Ratio explains what each of these numbers means.