Device Bench

Device test · Display

Screen Resolution and Pixel Density

Hold an ID-1 card to the outline, then press Apply calibration.

Resolution— Pixel density96 ppi (assumed) Screen size— Glass W × H— CSS pixels— CSS PPI96 (assumed) px/cm37.8 Unitcm Calibrationassumed 96 DPI

Calibrate with an ID-1 card

Use a flat, undamaged card in the ISO/IEC 7810 ID-1 format, whose nominal long edge is 85.60 mm. Many payment cards follow it, though not every debit, credit or ID card does. Hold the card flat against the screen, look at it straight on, and drag Outline width until the outline matches the card's physical long edge, ignoring the printing. Then press Apply calibration. The control spans about 1.5 to 16 CSS pixels per millimeter (38 to 406 CSS pixels per inch). A value at either end of the slider is refused and your current scale stays in place, so if the card will not match between those limits, this setup cannot be calibrated here.

Check the scale

Choose cm for millimeter ticks with centimeter labels, or inches for ticks every sixteenth of an inch. The scale is drawn from the same calibration as the readouts, or from the 96 CSS-ppi assumption until you calibrate, so holding a known-size object against it is a quick way to spot a bad card match.

How this test works

The readout holds three kinds of number. Resolution and CSS pixels are reported: they come from the browser's screen width, screen height and device pixel ratio, and need no calibration. The card match is measured: the outline's width in CSS pixels divided by the card's nominal 85.6 mm long edge gives CSS pixels per millimeter for this screen and setup. The size and density figures are derived from that scale. Multiply CSS px/mm by 25.4 for CSS PPI, and by the device pixel ratio as well for device ppi. Divide the reported CSS width and height by CSS px/mm for the screen's width and height in millimeters, and the diagonal follows from those two lengths.

The outline uses the nominal ID-1 long edge specified by ISO/IEC 7810, so a card of another size gives a wrong calibration. When you apply a match, the page saves device pixels per millimeter: CSS px/mm multiplied by devicePixelRatio. On a later visit, or when the ratio changes, it divides that density by the current devicePixelRatio to restore or rescale your calibration, and it discards a result outside 1.5 to 16 CSS px/mm. The saved density is the panel's own when the browser draws on the panel's pixel grid; under a scaled framebuffer, such as a macOS scaled resolution, it is the density of that framebuffer. The record stays in your browser's local storage and is never uploaded.

The green bank card ±1.1% label appears after you apply an in-range match during this visit, and its band is the tool's own allowance for card tolerance and for lining up two edges by eye; the page cannot see your card or check how well you matched it. A restored or rescaled calibration shows re-check instead, because some browsers change the size of a CSS pixel on zoom without telling the page, and a new pixel ratio can mean the window moved to a different screen. Privacy modes can substitute the screen dimensions the size is calculated from, and overscanning TVs, projectors and strongly curved panels do not suit this flat-screen calculation.

Frequently asked questions

Is Resolution my panel's native pixel count?
Yes, when the browser draws straight onto the panel, as on a phone or a monitor running at its native resolution. Resolution is the screen width and height the browser reports, multiplied by devicePixelRatio and rounded to whole pixels. Three setups change it: a macOS scaled resolution, where the browser draws into a framebuffer that is not the panel; page zoom folded into the ratio; and a fingerprinting-resistance mode that substitutes the reported values. A web page cannot tell those apart from real hardware. The CSS pixels field shows the reported size and the ratio the figure is built from.
How is pixel density in PPI calculated?
From your card match, in two steps. The page divides the matched outline width in CSS pixels by 85.6 mm, and multiplying that scale by 25.4 gives CSS PPI. Multiplying CSS PPI by devicePixelRatio gives the Pixel density readout in device ppi: the density of the pixel grid the browser draws on, which is the figure usually meant by a panel's ppi. Before calibration, CSS PPI is the web's 96 assumption and the device figure is 96 times the reported ratio, and both are labeled assumed. Under a scaled framebuffer, the device figure is the framebuffer's density.
How is screen size calculated, and how close is it?
The browser reports the screen's width and height in CSS pixels, and dividing each by your calibrated CSS pixels per millimeter gives them in millimeters; the diagonal comes from those two and is shown in inches. The figures cover the whole screen the window is on. The calculation does not use devicePixelRatio directly, so a scaled framebuffer does not distort it, though it does need a current card match. The ±1.1% band is the tool's allowance for card tolerance and alignment, about ±0.15 in on a 13-inch diagonal; zoom, a card that is not ID-1 size or unusual display geometry can add more.
When should I check calibration again?
On each visit, and after changing zoom, display scaling, orientation or monitors. The page stores device pixels per millimeter and divides it by the current devicePixelRatio, so a change the browser reports through that ratio is corrected by arithmetic. A restored calibration reads saved in the Calibration field and a corrected one reads rescaled, each followed by re-check. After a match in this visit, a change in window width with no ratio change also brings up a re-check notice, since on some browsers that is the only sign of a zoom. Measure at 100% zoom, which Ctrl+0 (Cmd+0 on a Mac) restores, then match the card and press Apply calibration.
Is my calibration data uploaded or shared?
No. Calibration stays on this device: nothing is sent to a server, and there is no account. Your browser's local storage holds one versioned record with the calculated device pixels per millimeter, the device pixel ratio used for the match, the ID-1 reference identifier and a timestamp, and no card details. Reset deletes the record and returns the scale to the 96 CSS-ppi assumption. If local storage is blocked, the calibration works for the current visit and the page tells you it could not be saved. A record the page cannot read, from an incompatible version or out of range is discarded, and the page asks you to calibrate again.

Related tools

Using the figures

For a wallpaper with chosen pixel dimensions, Depth Paper makes the image in your browser. If your system uses a scaled resolution, the Resolution value here is the size of the drawing grid, so confirm the size your wallpaper needs before you make it.

To measure an object in centimetres or inches, use the ruler at Real Sizer.