A CSS-Pixel Ruler That Calibrates to Real Units

A CSS pixel is not a physical unit — it's a device-independent reference that browsers map to actual screen pixels using a scale factor tied to viewing distance assumptions, not your specific monitor's DPI. That's why an on-screen "ruler" that just draws 96 pixels and calls it an inch is wrong on almost every real device. The Screen & Physical Ruler skips that assumption entirely: it asks you to calibrate against something you can physically measure.

How the calibration works

Hold a known-length object against the screen — a credit card (85.60mm long, ISO/IEC 7810 ID-1 standard), a ruler, a coin with a documented diameter — and drag the on-screen scale to match it. That single calibration produces a pixelsPerMillimeter ratio for your specific screen at its current zoom level, which the tool saves locally so you don't repeat it next visit. Everything measured afterward is derived from that ratio, not from a hardcoded pixel-to-inch guess.

What breaks the calibration

Browser zoom level and OS display scaling both change the actual pixel density after you calibrate, so a saved calibration from a 100% zoom session won't hold at 125%. If a measurement looks off, the fastest check is to reset zoom to what it was during calibration, or just recalibrate — it takes one drag.

Good for quick checks, not for cutting

This is a "how big is this roughly, without getting up to grab a ruler" tool — screenshot sizing, quick furniture-fit sanity checks, comparing two on-screen dimensions. For a woodworking cut or anything where a millimeter matters, use a real ruler. Pair it with the Digital Bubble Level when you're actually hanging or leveling what you just measured, or the Kitchen & Recipe Converter when the unit you're converting is volume, not length.