How a Bank Card Measures a Screen's Pixel Density

Choosing a reference card

The ID-1 format in ISO/IEC 7810 has nominal dimensions of 85.60 mm by 53.98 mm. Many payment cards follow it, but not every object called a debit, credit, gift, access, or identification card is a conforming, undamaged ID-1 reference. Choose a rigid card and check that its physical body matches the standard. Do not use a bent, damaged, embossed-edge, or nonstandard card without checking it.

Calibration needs a known physical width. With a long, rigid edge, a small alignment error accounts for less of the measurement than it would with a short object. The result still depends on how closely you match the edges by eye.

Measuring CSS pixels per millimeter

A CSS pixel is a page-layout unit, not a fixed physical length. CSS uses 96 pixels per inch, about 3.78 per millimeter, but display scaling such as 125% or 150% changes how those units appear on the screen. A line drawn at 100 CSS pixels can therefore have different physical lengths on a laptop, phone, or monitor. The browser cannot determine that length from its pixel counts alone, so the screen resolution and pixel density test starts with a scale labeled assumed.

To calibrate it, hold a conforming ID-1 card flat against the screen. Drag the slider until the on-screen outline matches the width of the card, then press Apply calibration. The page divides the matched width in CSS pixels by the standard's nominal 85.60 mm. That gives effective CSS pixels per millimeter for that screen, zoom, scaling, viewing angle, and alignment. For example, a match at 340 pixels gives 3.97 px/mm.

Converting the scale to ppi

To convert pixels per millimeter to pixels per inch, multiply by 25.4. In the example, 3.97 px/mm is 101 CSS pixels per inch. A CSS inch drawn with 96 pixels would be about 5% short on that screen: it would need 101 pixels to cover a physical inch.

CSS pixels and device pixels are different units. Multiply CSS ppi by the browser's devicePixelRatio to get device pixels per inch, the density of the grid the browser draws on. At a ratio of 2, 101 CSS ppi becomes 202 device ppi. Use CSS ppi when checking whether a web page draws something life-size. Device ppi is the figure usually meant in a panel specification such as 254 ppi, provided the browser is drawing on the panel's own grid.

The tool stores device pixels per millimeter rather than the CSS-pixel figure. When the browser draws directly on the panel, that density is a property of the glass; the CSS scale depends on zoom and display scaling. On a later visit, the tool divides the saved density by the current device pixel ratio to recover the CSS scale. It can then correct for a reported scaling change, but the restored match still needs checking.

Calculating the screen's physical size

A screen-size calculator usually starts with a resolution and the diagonal listed for the display, then calculates pixel density. Its result depends on that diagonal being accurate and on the pixel count being the panel's own. Those are inputs to a calculation, not a fresh measurement of the screen.

After a card match, you can calculate size from density instead, without entering a diagonal. Divide the screen width and height reported in CSS pixels by the measured CSS pixels per millimeter. The results are the glass width and height in millimeters; use Pythagoras to get the diagonal. At 3.97 px/mm, a screen reporting 1512 × 982 CSS pixels works out to 381 × 247 mm, with a 17.9-inch diagonal.

This calculation does not need the device pixel ratio. Both the screen dimensions and the measured density use CSS pixels, so dividing cancels that unit. Display scaling can change the pixel counts without changing the physical size derived from them, as long as the calibration matches the current scale.

Aligning the card

Check the card and your viewing position before you apply calibration. A standard nominal size does not make a visual match exact.

Use a rigid, flat card. Choose a stiff plastic card rather than a bent one. A bent card held against a flat screen presents a foreshortened width, and matching that width passes the error into the calibration.

Match the card body, not the printing. The standard specifies the card blank: the physical rectangle. Artwork, logos, and embossed numbers may be off-center, so align the outline with the card's actual edges. Ignore the printing between them.

Look straight at the screen. The card touches the glass, but the pixels are a small distance behind it. From an angle, that separation shifts where the card's edge appears against the outline. Looking straight on reduces this parallax error.

Calibrate at your usual zoom. Browser zoom changes how many physical pixels a CSS pixel spans, so the measured CSS scale applies to the zoom setting used for the match. Use your normal viewing zoom, ideally 100%, and repeat the match after changing zoom or the system's display scaling.

Browser limits and saved calibrations

The derived device density describes the pixel grid the browser draws on. Usually that is the panel's grid. Under a macOS scaled resolution, however, the browser renders into a framebuffer larger or smaller than the panel, and the hardware resamples the result. The density then belongs to that framebuffer rather than to the panel. Fingerprinting-resistance modes can also replace the reported pixel counts and device pixel ratio. A web page cannot reliably distinguish these cases from the panel's own values, so treat device ppi as the density of the grid being drawn on, not as a hardware specification.

A saved match needs another look after browser zoom or display scaling changes. The screen may not have moved, but the mapping from CSS pixels to physical distance has. Some browsers report the change through the device pixel ratio, allowing the tool to correct the scale arithmetically. Others change the size of a CSS pixel without a signal the page can use. That is why a restored calibration is not badged as verified until you confirm it. If the readout does not indicate a match made in this session, hold the card against the outline again and press Apply calibration once it matches.