Device Bench

Device test · Display

Screen Resolution and Pixel Density

What this display actually is: the pixel count your browser reports, the pixel density of the grid it draws on, and the physical size of the glass in inches and millimeters. The resolution needs nothing from you; the physical figures need one bank card held against the outline, and what gets saved is your panel's own pixel density, on this device only — nothing is uploaded.

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

Measure this screen with a bank card

Hold any standard bank card flat against the outline below — every debit, credit, and ID card is exactly 85.60 mm on its long edge (ISO/IEC 7810 ID-1). Drag the slider until the outline is precisely as wide as the card, then apply: that single match is what turns the readout above from the browser's 96-DPI assumption into figures measured on your own glass. The control spans 1.5 to 16 pixels per millimeter, which reaches every real display from a television to a 4K laptop panel at 100% scaling; if the outline runs out of travel before it matches your card, the calibration is refused rather than saved.

The measured scale

The same measured number draws this scale, so it is the measurement made visible rather than a second instrument: hold an object against it to check the match, in centimeters or in sixteenths of an inch.

How this test works

Three kinds of number sit in that readout strip, and telling them apart is most of what this page is for. The first kind is reported: the screen's size in CSS pixels, the device pixel ratio, and their product, printed as Resolution. It needs no calibration and contains no physical fact — it is what the browser was told. The second kind is measured: holding a bank card against the outline fixes how many CSS pixels cover one millimeter of glass, which is the only physical measurement of a display a web page can obtain, because no browser API reports one. The third kind is derived from the second — multiply px/mm by 25.4 for CSS pixels per inch, multiply that by the device pixel ratio for the density of the pixel grid being drawn on, and divide the screen's CSS pixel count by px/mm for the width, height and diagonal of the glass itself.

The reference is a bank card because ISO/IEC 7810 fixes the ID-1 format at 85.60 mm on its long edge, whichever bank issued it. When you drag the slider until the on-screen outline matches your card, the page divides the outline's width in pixels by 85.6. What it saves is not that ratio: it multiplies by devicePixelRatio first and stores the result — the number of physical pixels your panel puts in a millimeter, which is a property of the glass rather than of today's zoom level — and divides it back out against whatever devicePixelRatio reports on your next visit. The outline control spans 1.5 to 16 pixels per millimeter, 38 to 406 CSS pixels per inch, which covers every display from a television to a 4K laptop panel at 100% scaling. The record stays in your browser's local storage — nothing else, and nowhere else.

Each figure fails in its own way, and the readout names the state it is in rather than rounding it off. A match is badged green — bank card ±1.1% — only in the session where you held the card against the outline; that band is the card's own tolerance in service plus the alignment slop of a two-edge match by eye, so a 13-inch diagonal carries roughly ±0.15 in with it. The physical size is the sturdiest figure here because it never passes through the device pixel ratio. The density is the least sturdy: under a macOS scaled resolution the browser renders into a framebuffer that is not the panel, so what gets measured is the framebuffer's density, and the reported Resolution inherits the same caveat along with privacy modes that rewrite those values deliberately. A calibration restored from an earlier visit, or rescaled after your display scaling changed, reads re-check instead of green, because some browsers change the physical size of a CSS pixel on zoom without reporting it anywhere a page can see. And every figure describes the flat plane of the display this window is on: overscanning TVs and projectors, and strongly curved panels, will disagree with a tape measure however carefully you calibrate.

Frequently asked questions

What is my screen resolution, and is that number the panel's own?
The Resolution field is the size your browser reports for this screen multiplied by its device pixel ratio, so wherever the browser draws straight onto the panel — a phone, or a monitor running at its native resolution — it is the panel's own pixel count. Three cases make it something else: a macOS scaled resolution, where the browser renders into a framebuffer that is not the panel; a browser that folds page zoom into the ratio; and a fingerprinting-resistance mode that rewrites both numbers on purpose. No web page can tell those apart from real hardware, so this one prints what the browser reports and calls it that. The CSS pixels field beside it shows the unmultiplied figure and the ratio the product is built from.
How is the pixel density in PPI worked out?
From the card, in two steps. Matching the outline to a bank card fixes how many CSS pixels cover one millimeter of glass; multiplying by 25.4 gives CSS pixels per inch, and multiplying that by the device pixel ratio gives device pixels per inch — the density of the pixel grid the browser is drawing on. Both are printed, because they answer different questions: CSS PPI is what a web page's own units are worth on your screen, and the device figure is the one usually meant by a panel's ppi. Until you match a card, both are the web's 96-CSS-ppi assumption and are labeled assumed. Where the browser renders into a scaled framebuffer, the device figure is that framebuffer's density rather than the panel's.
How can a web page know my screen size in inches?
Only by measuring, which is what the card is for — there is no browser API that reports the physical size of a display. What the browser does report is the screen's size in CSS pixels, and dividing that by the measured CSS pixels per millimeter gives the width and height of the glass in millimeters, with the diagonal from those two. That figure never passes through the device pixel ratio, so a scaled framebuffer cannot distort it, which makes it the sturdiest number on the page. It carries the card match's own ±1.1% — about ±0.15 in on a 13-inch diagonal — and it describes the whole display this window is on, which on a two-monitor desk is whichever screen the window is sitting on.
Does browser zoom or display scaling break the figures?
Not always, and the readout tells you which case you are in. What is saved is your panel's physical pixel density rather than a browser-pixel ratio, so when a browser reports a zoom or display-scaling change through devicePixelRatio, the scale is corrected by arithmetic and the readout reads rescaled — re-check. Not every browser reports it: in some, zooming changes the physical size of a CSS pixel with no signal a page can read, which is why a calibration restored from an earlier visit is never badged green until you confirm it against your card. Measuring at 100% zoom, which Ctrl+0 (Cmd+0 on a Mac) restores, avoids the question entirely.
Is my calibration data uploaded or shared?
No. Calibration writes one small record — your panel's physical pixel density, the device pixel ratio it was measured at, which reference object was used, and a timestamp — into your browser's local storage on this device. Nothing is sent to a server, there is no account, and pressing Reset deletes the stored record immediately. A record left by an older version of this page is discarded on sight rather than reinterpreted, because the number it saved no longer means the same thing.

Related tools

What to do with the number

Now that this screen's exact pixel size is known, a wallpaper can be built to fit it rather than cropped to it — Depth Paper makes them at an exact size in the browser.

And if you came here looking for a ruler rather than a screen measurement, Real Sizer is the one that measures objects in centimetres and inches.