How a Bank Card Measures a Screen's Pixel Density

Why a card is a reference you can trust

ISO/IEC 7810 defines the ID-1 identification-card format at a nominal 85.60 mm by 53.98 mm. Many payment cards use that format, but not every object called a debit, credit, gift, access, or identification card is a conforming, undamaged ID-1 reference. Use a rigid card whose physical body matches the standard; do not use a bent, damaged, embossed-edge, or nonstandard card without checking it.

The useful property is a known physical width over a long, rigid edge. That makes a small alignment error a smaller fraction of the reference than a short object would, while the remaining uncertainty still belongs to the user's visual match.

What a match actually measures

Web pages measure in CSS pixels, and a CSS pixel is an abstraction rather than a physical size. Browsers assume 96 CSS pixels per inch — about 3.78 per millimeter — and then the operating system's display scaling stretches that assumption by 125%, 150%, or whatever your settings say. The physical distance covered by "100 pixels" is therefore different on your laptop, your phone, and your monitor, and no web page can work out which situation it is in from first principles. That is why the screen resolution and pixel density test starts up labeling its own scale assumed: honest instruments report their state.

Calibration replaces the browser assumption with arithmetic on the user's match. You hold a conforming ID-1 card flat against the screen and drag the slider until the on-screen outline is exactly as wide as the card. At that moment the page has the matched width in CSS pixels and uses the standard's nominal 85.60 mm width. Dividing one by the other gives effective CSS pixels per millimeter for that screen, zoom, scaling, viewing angle, and alignment. Match at 340 pixels, for instance, and the scale is 3.97 px/mm.

From pixels per millimeter to a density in ppi

Pixel density is quoted per inch, so the first step is a multiplication by 25.4. The 3.97 px/mm above is 101 CSS pixels per inch — which means a CSS inch on that screen comes out about 5% short, because the browser is drawing 96 pixels where 101 belong.

The second step is the one people skip. CSS pixels are not the pixels in the panel: the browser reports a devicePixelRatio, and multiplying the CSS figure by it gives device pixels per inch — the density of the pixel grid the browser is actually drawing on. On a screen reporting a ratio of 2, that 101 CSS ppi is 202 device ppi. Both numbers are real and they answer different questions. CSS ppi tells you what a web page's own units are worth on your screen, which is what matters when a page claims to draw something life-size; device ppi is the figure normally meant when a panel is described as, say, 254 ppi.

The device figure is also the one worth storing, and it is what the tool stores. A CSS-pixel figure is only true at the zoom level it was measured at, while a device-pixel density is a property of the glass. Save the physical quantity, divide it by whatever the ratio is on the next visit, and a display-scaling change becomes an arithmetic correction rather than a silent error.

From a density to the size of the glass

The usual screen size calculator runs this backwards: you tell it the resolution and the diagonal your screen was sold as, and it tells you a density. That works only if the marketed diagonal is honest and the reported pixel count is the panel's own — and it is not measuring anything, it is doing arithmetic on two things you typed.

After a card match the arithmetic runs the other way and nothing needs to be typed. The browser reports the screen's size in CSS pixels; divide those by the measured CSS pixels per millimeter and you have the width and height of the glass in millimeters, with the diagonal from the two by Pythagoras. A screen reporting 1512 × 982 CSS pixels at 3.97 px/mm is 381 × 247 mm across, a 17.9-inch diagonal.

Notice what that division does not use: the device pixel ratio. Physical size is a CSS pixel count divided by a CSS pixel density, so the ratio cancels before it can do any damage. That makes the size figure the sturdiest thing a screen measurement produces — it survives the display scaling that makes raw pixel counts misleading.

Getting a clean match

The card is precise; the alignment is up to you, and a few habits close most of the gap.

Rigid beats flexible. Use a stiff plastic card, not one that has spent years bowing to the shape of a back pocket. A bent card held to a flat screen presents a foreshortened width, and the calibration inherits the error.

Align to the card body, not the printing. The standard fixes the dimensions of the card blank — the physical rectangle. Artwork, logos, and embossed numbers can sit off-center on that blank, so match the outline to the card's actual edges and ignore everything printed between them.

Look straight on. The card rests on the surface of the glass while the pixels glow a small distance beneath it. View the match from an angle and that separation shifts the apparent alignment — the parallax that makes a speedometer read differently from the passenger seat.

Match at the zoom you use. Browser zoom changes how many physical pixels one CSS pixel spans, so a match made at one zoom level is wrong at every other. Calibrate at your normal viewing zoom, ideally 100%, and redo it whenever you change zoom or the system's display scaling.

Where the number stops being the panel's own

Everything derived above is true of the pixel grid the browser is drawing on, which is usually the panel and sometimes is not. Under a macOS scaled resolution the browser renders into a framebuffer larger or smaller than the panel and the hardware resamples the result, so the measured density is the framebuffer's and the panel's own is higher. A fingerprinting-resistance mode may rewrite the reported pixel counts and the ratio on purpose. Neither case is detectable from inside a web page, which is why the density is presented as the density of what is being drawn on rather than as a hardware specification.

The subtlest bad measurement is a stale one. Change the browser zoom or the system's display scaling and a previous match is silently invalid — the screen did not move, but the mapping between CSS pixels and glass did. Some browsers report that through the device pixel ratio, and the reading can be corrected by arithmetic; some change the physical size of a CSS pixel with no signal a page can read, which is why a restored calibration is never badged as verified until you confirm it. The readout is the tell: if it does not say the match was made in this session, hold the card up again. Thirty seconds of card-on-glass is the whole cost, and it is the difference between a measurement and a guess with extra steps.