Why on-screen rulers are often the wrong size

Put a real ruler against most “actual size” online rulers and you’ll find they don’t match. The difference is often 10–15% on a laptop, and on a phone it can be much worse. That isn’t careless programming. A web page simply isn’t told how big your screen is.

What a web page knows about your screen

A web page measures everything in CSS pixels. Under the CSS rules, one inch is defined as exactly 96 CSS pixels and one centimeter as 37.8. So when a page asks the browser for a “10 cm” line, it gets a line 378 CSS pixels long.

The catch is that a CSS pixel isn’t a fixed physical size. It depends on the screen’s resolution, its physical size, the operating system’s scaling setting and the browser’s zoom. None of that is reported to the page. The browser can tell a page how many pixels it has, but not how many millimeters they cover.

Two real examples

A 15.6-inch laptop at 1920 × 1080 with Windows set to 125% scaling. The panel is about 34.5 cm wide. With 125% scaling the browser reports 1536 CSS pixels across it, which works out to about 113 CSS pixels per inch rather than 96. A “10 cm” line of 378 pixels therefore measures about 8.5 cm on that screen — 15% short.

A typical phone. A phone screen around 6.7 cm wide usually reports about 390 CSS pixels across. That’s roughly 148 CSS pixels per inch. The same “10 cm” line comes out at about 6.5 cm — a third too short.

So an on-screen ruler that relies only on the CSS standard is wrong on almost every device, and wrong by a different amount on each one.

What this site does about it

The ruler tries to work out your screen’s real scale before you do anything:

• iPhones, iPads and Mac laptops are recognized from their screen resolution. Apple uses a small number of panel densities, so the size is exact.
• Android phones are estimated from their screen width. Phone screens fall in a fairly narrow range of physical widths, so this gets within a few percent.
• Other screens — Windows laptops, desktop monitors — start from the 96-pixels-per-inch standard and are marked as an estimate, because there’s no reliable way to tell.

The button at the top right of the ruler shows which of these applies to you.

The fix: calibrate once with a card

To make the ruler exact on any screen, you need something of a known size. Bank cards, ID cards, driver’s licenses and most membership cards all follow the same ISO standard: 85.60 × 53.98 mm.

Tap Calibrate, hold the card against the screen, and drag the outline until its edge lines up with the card’s. The ruler then knows exactly how many pixels make a millimeter on your screen, and remembers it for next time.

Things that undo calibration

• Browser zoom. Zooming in makes every CSS pixel bigger. The ruler notices zoom changes and adjusts, but calibrating and measuring at 100% is the safest habit.
• Moving the window to a different monitor. Each screen has its own scale, so calibrate on the one you’re using.
• Changing the display resolution or scaling in your operating system settings.

Once it’s calibrated, readings on this site are typically within about a millimeter over 10 cm. That’s fine for checking a screw, a ring or a print, but not for anything where accuracy matters for safety.