Screen Ruler
Measure small things against your screen — calibrated with a bank card, so the millimetres are real.
Hold a bank, credit or ID card against the screen and size the box until the two edges match. Every card in the ID-1 format is 85.6 × 53.98 mm.
Box width
324 px wide — the buttons step a pixel at a time, and so do the arrow keys once the slider has focus.
Quicker than dragging, and a useful cross-check — but an advertised diagonal is rounded, and it counts the corners a rounded bezel takes away.
Why a screen ruler has to be calibrated
A web page cannot ask the browser how big its pixels are. CSS has units called in, cm and mm, and they look like they should solve
this, but they are defined against the CSS reference pixel at exactly 96 pixels to
the inch. That number is a convention, not a measurement of your monitor. Draw a line 96px long and you have drawn a line the specification calls one inch; whether it
is one inch on the glass depends entirely on the panel it lands on.
The gap is not small, and it does not run in one direction. On a 27-inch 1440p monitor — about 109 real dots per inch — a CSS inch measures 0.88 of a real inch, so an uncalibrated ruler reads about 12% short. On a 15.6-inch 4K laptop at 200% scaling it measures 0.68 of an inch, nearly a third short. On an older 24-inch 1080p panel, where the pixels are larger than the convention assumes, it goes the other way and measures 1.05 inches. A phone is further out still: a modern handset runs around six CSS pixels per millimetre against the nominal 3.78.
No browser API closes that gap. devicePixelRatio tells you how many device
pixels are packed into a CSS pixel, not how large either one is; screen.width is measured in the same unmoored units. The only way to get from
pixels to millimetres is to show the visitor something on screen and have them compare it with
an object whose real size is already known.
Why a bank card
Payment cards, driving licences and most ID cards are made to ISO/IEC 7810 ID-1: 85.60 mm by 53.98 mm, with the tolerances measured in hundredths of a millimetre. It is one of the few precisely specified objects almost everyone has within reach, which makes it a better reference than a ruler you would have to own already or a coin whose size changes by country.
Hold the card flat against the screen, drag the slider until the outline matches its edges, and save. The tool records how many CSS pixels fit in a millimetre on this display, and every reading afterwards is scaled by that one number.
On a phone the card is turned upright. At true scale its long edge is 470 to 520 CSS pixels, which is wider than most phones in portrait, so a box that had to be laid down could never grow to the size of the card it was supposed to match. Standing the card on its short edge needs only about 300 pixels and fits comfortably.
How accurate is it?
Accuracy is set by how well you can judge the card's edge. Being one millimetre out over the card's 85.6 mm is an error of 1.2%, which is 3.5 mm over a 30 cm span; half a millimetre out halves that to 1.8 mm. That is fine for checking a screw length, a bead, a photo crop or a ring size, and it is not a substitute for a caliper. Reading to the nearest millimetre on the ruler itself is realistic; reading to a tenth is not.
Two things silently invalidate a saved calibration, and the tool watches for both. Zooming the
page changes how many device pixels a CSS pixel covers, and so does dragging the window to a
second monitor with a different pixel density. Both move devicePixelRatio, which is stored alongside the scale, so the tool notices and
asks you to measure again rather than quietly reporting millimetres it can no longer support.
Pinch-zoom on a phone is the third case: it magnifies the ruler but not the object you are
holding against it, and it is flagged separately because it does not change the pixel ratio at
all.
Reading the ruler
In metric the ruler is marked every millimetre, with a longer tick every five and a numbered tick every centimetre. In imperial it is marked in sixteenths of an inch, with the tick length growing at each halving — sixteenth, eighth, quarter, half, inch — which is how a physical rule is graduated, so the eye can count down from a numbered inch without reading every mark. Inch readings are given as a whole number and a reduced fraction, so 0.375 inches shows as 3/8 rather than 6/16.
Tap or drag anywhere on the strip to place the marker, or focus the slider and use the arrow keys for single-pixel steps. The readout gives the same distance three ways at once: in CSS pixels, in your chosen unit, and in the finer sub-unit. Turning the ruler down the page gives you the longer measurement on a phone — a vertical ruler measures upward from its bottom edge, where its zero is drawn.
Everything happens in your browser. The calibration is kept in local storage on this device only; nothing is uploaded, and there is no account to make. Because the scale describes one display, a device with two monitors needs recalibrating when the window moves between them.
Why is the ruler wrong before I calibrate it?
Until you calibrate, the ruler is drawn at CSS's nominal 96 pixels per inch, which is a convention rather than a property of your screen. Real displays run anywhere from about 92 to 460 dots per inch, so the uncalibrated ruler can be a third out in either direction. Readings taken before calibration are labelled nominal for that reason.
What size is a credit card exactly?
Cards in the ISO/IEC 7810 ID-1 format — bank cards, credit cards, most driving licences and ID cards — are 85.60 mm by 53.98 mm, or 3.370 by 2.125 inches, with corners rounded to a 3.18 mm radius. The standard is tight enough that any such card works as a reference.
Do I have to calibrate again on my phone?
Yes. The calibration describes one display, and it is stored per device and per browser. A phone, a laptop and an external monitor each need their own — and on a laptop with an external screen, moving the window between them changes the pixel ratio, which the tool detects and flags.
Can I measure something longer than my screen?
Not in one go. Turning the ruler down the page gives you the longer dimension, which on a phone is roughly 12 cm against 7 cm across. Beyond that, mark the object at the end of the ruler and measure the remainder — each step adds the error of the mark you made, so it is worth a real tape after two or three.
Why does entering my screen size work without knowing the pixel ratio?
Because the ratio cancels. The number of device pixels across the screen is its CSS width multiplied by the pixel ratio, and the number of CSS pixels per inch is the physical density divided by that same ratio. The CSS dimensions and the diagonal are enough on their own. It also means that path is unaffected by page zoom, which the card is not.
How accurate is measuring on a screen?
Roughly one part in a hundred. Judging the card edge to a millimetre gives a 1.2% error, or about 3.5 mm over 30 cm. Good enough for a screw, a bead, a ring or a photo crop; not good enough for anything where a millimetre matters over a long distance.
Related Tools
Updated September 6, 2026