The unit every browser actually uses
A web page is not laid out in inches or millimetres. It is laid out in CSS pixels, a unit the web standard defines as exactly 1/96 of an inch, fixed, regardless of what screen the page ends up on. That definition made sense when it was written: most monitors of the era genuinely ran at close to 96 real pixels per inch, so a ruler drawn with plain CSS was, roughly by accident, close to correct.
That coincidence ended once high-density screens arrived. A modern 15-inch laptop can run at 220 real pixels per inch or more, a phone can exceed 450. On either, a shape drawn to be "one CSS inch" wide is still 96 CSS pixels, but those 96 pixels now cover a much smaller slice of actual glass. The ruler has not changed; the screen underneath it has.
A worked example
Take two screens showing the same ruler page: a 24-inch 1080p monitor at roughly 92 real pixels per inch, and a 13-inch laptop with a dense panel at roughly 227. A ruler drawn naively at "96 CSS pixels per inch" happens to land close to correct on the monitor, within about 4%. On the laptop the same markup draws a shape that is 96 real pixels wide, and 96 real pixels at 227 PPI is only about 0.42 real inches, not one. The laptop's "inch" is drawn at under half its true size, and nothing on the page tells you that has happened.
This is why two people comparing notes on the same ruler site, one on each machine, can end up with genuinely different answers for the same object, both reading their screen correctly and both being wrong by a different amount.
Guessing does not fix it
The obvious next step is to have the page ask the browser what screen it is on and look up a known pixel density. This works for exactly as long as the lookup table stays current, and it breaks the moment someone changes their operating system's display scaling, plugs a laptop into an external monitor, or uses hardware released after the table was written. None of that is visible to the page. The browser reports a scale factor, not a physical size, and the two only agree when nothing about the setup is unusual.
The fix: calibrate against something of a known, fixed size
The only way to know a screen's real pixel density is to measure it, and the simplest object to measure against is one that is standardised worldwide and that most people already have in their wallet: a bank card. Every payment card, in every country, is built to ISO/IEC 7810 ID-1, which fixes its width at 85.6 mm. Hold a real card against an on-screen outline and adjust the outline until the two edges line up, and the adjustment factor is your screen's actual pixel density, measured directly rather than assumed.
From that one match, every other physical measurement on the page can be scaled correctly: a ring size chart, a sheet of A4, a coin held up against a listing photo. That is why this site asks for a card match before showing a number it is willing to stand behind, rather than quietly rendering something that might be a third wrong.
What breaks a calibration once it is set
Three things invalidate it, and all three are the operating system changing the same scale factor calibration measured. Browser zoom away from 100% changes it directly. Moving the browser window to a different monitor changes it, since the new screen has a different real pixel density even if the operating system keeps reporting the same logical resolution. And changing display scaling in system settings, commonly to make text larger on a high-density screen, changes it too. None of these throw a visible error; the ruler just quietly reads wrong again, which is why recalibrating after any of the three is worth the ten seconds it takes.
Once calibrated, the setting is stored in the browser and reused automatically by every tool that needs it, including the ring sizer and the paper size guide, so the card match only has to be done once per screen. The protractor is the one exception: angles are ratios, not lengths, so it reads correctly with no calibration at all.