Why a browser can't tell how big your screen is

Four numbers that get confused

Resolution

How many physical pixels the panel has across and down, such as 1080 × 2400. It says nothing about size on its own: a phone and a television can share a resolution.

Diagonal

The corner-to-corner length of the visible display, in inches. Manufacturers usually round it, often to one decimal place, and on phones with rounded corners it is measured as if the corners were square.

Pixel density (PPI)

Pixels per inch along a line on the panel. This is the number a ruler needs, because it converts a count of pixels into a physical length.

Device pixel ratio

How many physical pixels the browser uses for each of its own CSS pixels. Modern phones typically report 2, 2.625, 3 or similar.

Working out PPI from a spec sheet

If you know the resolution and the diagonal, Pythagoras gives you the diagonal in pixels, and dividing by the diagonal in inches gives the density:

PPI = √(width² + height²) ÷ diagonal

For a 6.1-inch phone with a 2532 × 1170 panel, the diagonal is √(2532² + 1170²) ≈ 2789 pixels, and 2789 ÷ 6.1 ≈ 457 PPI. For a 6.5-inch 1080 × 2400 phone it is roughly 405 PPI. A 24-inch 1920 × 1080 desktop monitor works out to about 92 PPI, which is why a desktop ruler with the wrong assumptions can be wildly off.

That calculation is only as good as its inputs. A diagonal rounded from 6.06 to 6.1 inches shifts the answer by about 0.7%, which is 0.7 mm across 100 mm. Most of the time that is fine. When it is not, the fix is to compare the ruler with a physical one, as described in the calibration guide.

CSS pixels and the "96 per inch" rule

Web pages are not laid out in physical pixels. They use CSS pixels, and the CSS standard defines one inch as exactly 96 CSS pixels. A browser therefore lets you write width: 1in, and it will happily draw something 96 CSS pixels wide.

That does not make it an inch. A phone at a device pixel ratio of 3 draws those 96 CSS pixels with 288 physical pixels. On a 457 PPI panel, 288 pixels is about 0.63 inches, or 16 mm instead of 25.4 mm. On a 92 PPI monitor at a ratio of 1, the same "inch" comes out about 26.5 mm. The CSS inch is a convention for layout, not a promise about the glass.

Browser zoom and operating-system display scaling change the device pixel ratio again. Zoom to 110% and every CSS length grows by 10%, ruler included. That is why the guides here suggest calibrating at your usual zoom and rechecking if you change it.

What the browser will not tell a web page

A page can read the screen's size in CSS pixels and the device pixel ratio. From those it can recover the physical resolution. What it cannot read is the diagonal, the PPI or the physical width of the display. There is no web standard for it, partly because the answer is often unknown even to the browser: an external monitor reports its size inconsistently, if at all, and a window can be dragged between two monitors with different densities.

Some Android browsers share a model hint, such as a short model code. Others, including Safari on iPhone, deliberately share very little, because detailed device information can be used to track people across sites. A model hint is a clue, not a measurement, and two variants of the same phone can have different displays.

How Screen Ruler works around it

1. It reads the resolution and pixel ratio the browser does provide, and any model hint.
2. It looks for a matching phone in a local list of display specifications, and can optionally check shared calibrations from other visitors with the same model. The privacy page explains what that sends.
3. Whatever it finds is a starting point. You confirm it, choose a different device, or set the scale directly against a physical ruler. Your choice is saved in your browser.

The last step is the one that matters. A ruler you have checked against a known length is more trustworthy than any automatic guess, which is why the reference sizes guide lists objects you are likely to have in a wallet or a drawer.