Is a CSS pixel really an absolute unit? That is, is 1 inch = 96px true?

Question

The official W3C documentation says:

1 px = 1/96th of 1 in

In my previous 18.5 inch screen, the screen.width was

Answer 1

A Css pixel unit is not necessarily a physical pixel measurement,(in my answer i am addressing css px for screens and not print)

For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel.

In the above explanation the reference pixel is explained as follows

The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

more explanation is here

For a simple example lets take an iPhone 8

Phy px 750 X 1334

CSS px 375 X 667

As you can see physical px measurements is completely different from Css px. Ratio between actual physical pixel and css pixel is called pixel ratio, which is determined based on viewing angle, distance it is viewed from and display resolution.

At the end of the day hardware vendor has this set depending on the above mentioned aspects.

Here is the link to the list of devices with phy px , css px and their pixel ratio.

The objective for all of this is to have a more consistent display through out different hardware.

And finally as documentation from w3.org points out:

Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)

In earlier versions Css pixel was heavily based on reference pixel which was based under the assumption its always 96dpi.Here instead css px and phy px are related by pixel ratio.

Hope this helps.