DeviceBenchFree online screen ruler
A screen ruler you calibrate with a bank card
Drag the outline until a payment card covers it exactly and the strip below turns into a real ruler — millimeter marks along the top, sixteenths of an inch along the bottom, and a marker you slide to the end of whatever you are holding against the glass. The card is the reference because ISO/IEC 7810 fixes every one of them at 85.60 × 53.98 mm, which makes the object already in your wallet a calibration standard accurate to a tenth of a millimeter. Your scale is remembered for next time, and until it is set the page says so out loud instead of quietly pretending that 96 pixels make an inch.
- 100% free
- No signup
- Card-calibrated
- 1 mm ticks
- Remembers your scale
Step one: hold a bank card against the screen
Nothing has been calibrated yet, so every figure on this page is still guessing at 3.780 pixels per millimeter. Drag the right edge of the outline until your card covers it exactly.
Step two: read anything you can hold against the glass
Drag the amber marker to the end of whatever you are measuring. Everything left of it is shaded, so a photograph of this page is enough to prove the reading later.
What the calibration reveals about your monitor
This panel stays empty until the card outline is set, because a size derived from an uncalibrated scale would be a guess dressed as a measurement.
No card on you?
Any of these will do instead — set the marker to the published figure, hold the object against the shaded band, and nudge the card handle until they agree.
- A4 sheet of paper
- 210 × 297 mm
- US Letter sheet
- 8.5 × 11 in
- US quarter
- 24.26 mm across
- One euro coin
- 23.25 mm across
- UK one pound coin
- 23.43 mm across the flats
- US dollar bill
- 155.96 × 66.29 mm
One inch is 2.54 cm, and the copied text carries both so nobody has to convert it twice.
How to measure something on your screen
The first step is the whole tool. The other two take about ten seconds each.
Lay a card on the outline and drag until they match
Take any payment card, library card or hotel key card out of your wallet, hold it flat against the screen over the dashed rectangle, and pull the blue handle on its right edge until the outline disappears behind the card exactly. The ±1 px buttons and the arrow keys are there for the last pixel or two, which is where most of the remaining error lives.
Slide the amber marker to the end of what you are measuring
Hold the object flat against the shaded band on the ruler with its left edge at zero, then drag the marker to where it ends. The four readouts underneath update together in millimeters, centimeters, inches and CSS pixels, so a measurement taken for a shipping form and one taken for a stylesheet come from the same drag.
Check the diagonal it worked out for your monitor
Once a millimeter has a real length, the browser's own screen figures divide into it and the page can estimate the physical size of the display you are on. If that estimate comes back a long way from the size on the box, the calibration is off — go back to the card and try again, because everything else on the page inherits that one number.
Technical specifications
| Calibration reference | ISO/IEC 7810 ID-1 — 85.60 × 53.98 mm with a 3.18 mm corner radius, the format of every payment card since 1985 |
|---|---|
| Assumption before calibration | 96 CSS pixels to the inch, 3.7795 to the millimeter, giving a 323.5-pixel card outline that fits almost no real display |
| Scale range accepted | 1.5 to 12 CSS pixels per millimeter, which spans an unscaled desktop through to a 4× handset |
| Tick spacing | 1 mm on the centimeter scale and 1/16 in on the inch scale, with taller marks every 5 mm and every 1/4 in |
| Ways to adjust | Drag the handle, tap the ±1 px buttons, or focus the handle and use the arrow keys — Shift moves ten pixels at a time |
| Accuracy limit | A 2-pixel misjudgment of the card edge is 0.6% — about ±0.6 mm across 10 cm and ±0.15 mm across 25 mm |
| Alternative references offered | Six, from a 23.25 mm euro coin to a 297 mm sheet of A4 |
| Written to this browser | One number, the pixels-per-millimeter scale, under devicebench.screen-ruler.px-per-mm — removed by the Forget button |
Frequently asked questions
Why does a ruler on a screen need calibrating at all?
Because a browser has no unit of length that corresponds to anything physical. Its pixel is defined as an angular measure, nominally one ninety-sixth of an inch at arm's length, and displays are built to whatever density their manufacturer chose, so 96 of them span 25.4 mm only by coincidence. On a 227 PPI Retina laptop the centimeter an uncalibrated ruler draws is 15% too small, so an object held against it reads 18% too long; on a 460 PPI phone the same object reads 60% too long. Any tool that draws a centimeter without asking you a question first is drawing a guess.
I do not have a card on me. What else has a published size?
Six alternatives are listed beside the ruler, and paper is the easiest of them: A4 is 210 mm across and US Letter is exactly 8.5 inches, both to a tolerance far tighter than your eye. Coins work too and are convenient because they fit on the ruler itself — a US quarter is 24.26 mm, a euro is 23.25 mm, a UK pound coin is 23.43 mm across the flats. Set the marker to the published figure first, then adjust the card handle until the object lines up with it.
The calibration was right yesterday and is wrong today. What changed?
Something moved the relationship between CSS pixels and glass, and there are only three candidates. Browser zoom is the usual one: a stray Ctrl and scroll wheel changes it without any visible announcement, and Ctrl+0 puts it back. Dragging the window to a second monitor with a different scale factor does the same thing more dramatically. And a system update that changes your display scaling — Windows sometimes revises the recommended value after a driver install — invalidates it silently. Re-drag the card and the stored number is replaced.
How accurate is this in practice?
Better than most people expect, and the limit is your eye rather than the arithmetic. Judging the card edge to within two pixels is easy, and two pixels on a 323-pixel reference is 0.6%, which works out at about ±0.6 mm over a 10 cm measurement and ±0.15 mm over 25 mm. That is comfortably good enough to size a screw, a phone case or a picture frame, and not good enough for anything with a tolerance in tenths of a millimeter.
Can I measure something longer than the ruler?
Only by stepping it, and the ruler is shorter than you think — a maximized window on a 27-inch 1440p monitor spans about 59 cm, and a phone in portrait holds barely 7 cm. Mark the object at the far end of the ruler, slide it along until that mark is back at zero, and add the two readings; each repositioning costs you roughly the accuracy of one edge judgment. Beyond two or three steps the accumulated error is worse than a tape measure would be.
Does this work on a phone or a tablet?
Yes, and it is the case where calibration matters most, because handset pixel ratios run from about 2 to 4 and no default is close for any of them. The handles use pointer events, so dragging with a finger works exactly as dragging with a mouse does. The one thing to watch is that pinch-zoom on a phone changes the scale without changing the stored number, so double-tap to reset the zoom before you calibrate and again before you measure.
Why is the pixel figure so much smaller than my screen resolution?
Because the ruler counts CSS pixels and your display is quoted in device pixels. On a panel with any scaling in play, one CSS pixel is drawn using two, three or four physical dots, so a 10 cm span that reads 447 CSS pixels on a Retina laptop is being painted with 894 of the display's own dots. The distinction does not affect the millimeter figure at all — the calibration absorbs it — but it does mean the pixel number is a layout measurement rather than a hardware one.
About the CSS inch, the ID-1 card and why the two have to meet
The CSS specification defines an inch as 96 pixels, and then immediately explains that this is not a claim about hardware. The reference pixel is an angular unit — the size a 1/96-inch mark appears at a nominal arm’s length of 28 inches — chosen so that a font specified at 16 units looks similarly sized on a phone held close and a television watched from a sofa. It works well for its purpose and it makes physical units in CSS approximate by construction: 1cm in a stylesheet is 37.8 reference pixels, which is a real centimeter only when the device happens to render at 96 pixels per physical inch. Almost nothing does. A 15.6-inch 1080p laptop is 141 PPI, a 27-inch 1440p monitor is 109, a modern phone is over 400, and each of them would draw a differently-sized centimeter from the same stylesheet.
Which leaves one honest route to a millimeter: put something of a known size against the screen and let the visitor close the loop. ISO/IEC 7810 defines four card formats, and ID-1 — 85.60 by 53.98 millimeters, 0.76 mm thick, corners rounded at 3.18 mm — is the one every bank card, driving license, hotel key and loyalty card in the world is made to. The standard has held since 1985, the manufacturing tolerance is a fraction of a millimeter, and there is no other object with that combination of precision and universality: a coin varies by country, paper varies by continent, and a ruler is the thing you did not have when you opened this page. What the drag produces is a single number, pixels per millimeter, and everything visible afterwards is that number multiplied out. Because it also converts the browser’s reported screen dimensions into inches, the page can hand back an estimate of your monitor’s diagonal and density as a side effect — a rough cross-check against what the density calculator gives when you type the size from the box.
Most on-screen rulers get this wrong in one of two ways. Some skip calibration entirely and draw at the CSS default, which is the version that sends people away convinced their monitor is lying to them. Others ask you to pick your screen size from a dropdown, which quietly assumes your resolution is the panel’s native one, your operating system is not scaling, and your browser is at 100% zoom — three assumptions that are wrong together more often than they are right. The card method is immune to all three, because whatever chain of scaling sits between the stylesheet and the glass, the card is on the glass. It is worth re-checking after anything that could have disturbed that chain. And if the thing you are measuring is in the panel rather than against it — a scratch, a bright spot, a patch of clouding — fill the screen with black or white first, note where its edges fall, and then measure; a defect is far easier to bound against a plain field than against a page full of text.
The one number this page remembers
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
This is the rare tool here that writes anything down, and it is a single decimal: your pixels-per-millimeter scale, kept under the key devicebench.screen-ruler.px-per-mm where this browser stores site data, so the ruler is already true on your next visit. It never leaves the device, the Forget button deletes it, and no measurement you take is recorded alongside it.