All right. This is an old one, but fun.

I know that we have 1in physical unit mapped to 96px on screen dpi. This mapping comes from way back in the 90s when monitors/screens used to be of a much lower resolve. That was a different time. Web was 'desktop only' utility then and as one would suspect implementations today haven't kept pace with the new landscape of the web.

Circa 2020.

I want to declare a css variable --inch at the :root of my webpage and map it to absolute inches for different devices using media queries. I can do that on the devices that I currently own, like so:

/* css */ :root { --inch: 130px; /* this value is from my Macbook Pro 2017 for example. */ } .square { width: var(--inch); height: var(--inch); background: red; }

And then with a ruler I measured the dimensions of the square on the screen. I even made a codepen for this to test and compare absolute inch with the in unit supported by your browser/machine.

Now. How should we go about setting --inch variable across mobile, watchos, iPads, desktops and if possible TVs and projectors as well?

UPDATE 1: Nailed the scope a little bit.

The following media-queries cover the wide selection of screens available on market. This list is from 2013 (credits) and may not be exhaustive but could be improved upon:

@media only screen and (min-width: 320px) { /* Small screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 700px) { /* Medium screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */ } @media only screen and (min-width: 1300px) { /* Large screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { /* Large screen, retina, stuff to override above media query */ }

UPDATE 2:

The following clause handles pixel to --inch mapping for all retina MBPs of 2017, for example.

@media (resolution: 192dpi) and (-webkit-device-pixel-ratio: 2) { :root { --inch: 130px; } } .square { width: var(--inch); height: var(--inch); background: orangered; }