How can a screen ruler be accurate?
Browsers report a CSS-pixel-to-device-pixel ratio but not a CSS-pixel-to-millimetre ratio — the latter depends on the physical screen size, which the browser cannot reliably know. To fix this we use a one-time calibration: hold an ISO/IEC 7810 ID-1 card (any standard credit, debit, or driving licence card, which is exactly 85.60mm wide) against the on-screen rectangle and drag the slider until they match. We then store that PPI in localStorage so subsequent visits skip the step.
How accurate is it after calibration?
Within about 1mm over a 10cm distance if you calibrated carefully. The dominant error sources are (a) parallax — your eye not being perpendicular to the screen, (b) the credit-card edge not aligning exactly with the rectangle, and (c) screen DPI variation across the panel (rare but real on cheap LCDs). For demanding work — sewing, model-making — calibrate at the largest comfortable distance, e.g. on a 30cm reference, and your error scales down proportionally.
Why not use the devicePixelRatio?
devicePixelRatio tells you the ratio of physical pixels to CSS pixels (e.g. 2 on a Retina display, 1.5 on most Windows laptops at 150% scaling). It does NOT tell you the size of one CSS pixel in real-world units. A CSS pixel is defined as 1/96 of an inch only as a notional reference — actual displays vary from 96 PPI (older monitors) to 460 PPI (iPhone Pro). That's why calibration against a known physical object is necessary.
Why a credit card?
ISO/IEC 7810 ID-1 specifies the dimensions to ±0.13mm and the format is identical worldwide. Credit cards, debit cards, most driving licences, hotel keycards and many membership cards all conform. The 85.60mm × 53.98mm rectangle is a more reliable reference than 'a centimetre' because nobody has a centimetre on them — but virtually everyone has a card.
Does the calibration persist?
Yes — we store the PPI value in localStorage tied to your screen's reported width-height-DPR signature. If you measure on the same device next time, no recalibration. If you switch from your phone to a desktop, you'll calibrate once for the desktop. Clearing site data resets calibration.
Why use a screen ruler instead of a real ruler?
For measuring things that are already on the screen (image dimensions, distances on a map screenshot, font sizes), the screen ruler is more accurate than holding a physical ruler against the glass — no parallax, no glare. For physical objects shorter than your screen width it's a convenient backup when no ruler is around. For longer objects use a physical tape measure.