CSS Pixels vs Device Pixels vs Physical Size

Three layers between a millimeter and a web page

When a web page draws a "1 cm" box, three separate systems decide how large it actually appears:

How each layer maps onto the next explains why a CSS centimeter is almost never a real centimeter, and what an actual-size ruler must do about it.

Layer one: physical size

A display panel has a fixed number of pixels spread across a fixed width of glass. The distance between adjacent pixel centers is the pixel pitch. For a 24-inch 1920 × 1080 monitor the density is about 91.8 pixels per inch, so the pitch is 25.4 / 91.8 = 0.277 mm. A 6.1-inch 1170 × 2532 phone is around 457 pixels per inch, or a 0.056 mm pitch.

This layer is the only one measured in millimeters, and it is the one the browser knows nothing about. No web API reports the panel's dimensions.

Layer two: device pixels

Device pixels are the panel's native grid, such as 1920 × 1080 or 2560 × 1600. Everything the operating system composites eventually lands on this grid. Because the grid is physically fixed, knowing how many device pixels fit in an inch fixes the physical scale of anything drawn on the display. The problem is that pages do not draw in device pixels.

Layer three: CSS pixels and the 96-per-inch convention

Web layout uses the CSS pixel, and the CSS specification pins the other absolute units to it: 1in equals exactly 96px, 1cm equals 37.8px, and 1mm equals 3.78px. The 96 figure comes from the "reference pixel," the visual angle of one pixel on a 96 dpi display viewed from about 28 inches.

It is a convention, not a measurement. A browser does not check how large your pixels are; it simply lays out 96 CSS pixels whenever a stylesheet asks for one inch. On a panel where 96 CSS pixels happen to span an inch the box is accurate, and on every other panel it is not.

Device pixel ratio connects layers two and three

window.devicePixelRatio (DPR) is the number of device pixels that cover one CSS pixel along one axis. Two things set it:

• Operating system scaling. Windows at 100% gives a DPR of 1, 125% gives 1.25, and 150% gives 1.5. macOS "Default" on a Retina display gives 2. Phones typically run at 2, 3, or higher.
• Browser zoom. Pressing Ctrl/Cmd + or − multiplies the DPR further. At 125% page zoom a DPR of 2 becomes 2.5.

Combining the layers gives the relationship an actual-size tool needs:

CSS px per inch = device pixels per inch / DPR

For the 13.3-inch laptop at 2560 × 1600, the density is 227 pixels per inch. At a DPR of 2 the browser sees 113.5 CSS pixels per inch, not 96.

What screen.width really returns

window.screen.width and window.screen.height report the screen in CSS pixels at the current scaling, not in device pixels and not in millimeters. The laptop above reports 1280 × 800 at DPR 2. The 1170 × 2532 phone reports 390 × 844 at DPR 3.

Multiplying by devicePixelRatio recovers an estimate of the device pixel grid, though browsers differ in whether page zoom is folded into the screen values, so the estimate is only dependable at 100% zoom. Even then, the result is a pixel count, not a size.

Why a "1 cm" CSS box is rarely 1 cm

Put the layers together for a width: 1cm box, which is always 37.8 CSS pixels:

The same stylesheet produces a box that is 5% too long on the monitor, 15% too short on the laptop, and 37% too short on the phone. None of these is a bug; the specification simply does not promise physical accuracy.

How calibration bridges the gap

The screen ruler stores CSS pixels per inch using either the visible-screen diagonal you enter or an ISO/IEC 7810 ID-1 card reference. For a card, choose its placement and 85.60 mm long edge or 53.98 mm short edge, align the fixed circle, and move the diamond in 0.5 CSS px steps. The calculation is CSS PPI = reference CSS pixels × 25.4 / reference millimeters.

For screen size, the result depends on the entered visible-panel diagonal and the dimensions the browser reports, which can be rounded or mapped differently. In either method, “saved” records the mapping but does not prove physical accuracy. The ruler records DPR and screen information so it can recommend a review after a detectable change; different displays can still report the same values. Check the final ticks with an independent physical reference.

What “px” means in the converter

In the unit converter, px means CSS pixels on the current screen, using the estimate or saved mapping shown beside the result. Only the px row depends on that mapping; conversions among mm, cm, m, inches and feet keep their exact unit ratios. A saved calibration can improve the px mapping, but it is not a universal pixel definition and still needs checking on the current display and zoom.