How to set physical dimensions (like actual inches) for elements?

Issue

My end goal is to display an image of the same exact size on every screen (yes, I really do need this for something).

I started reading about how to get the user's screen size here - and the answer seems to be that it's impossible (without calling an API which attempts to guess the actual device based on some params).

I then remembered that css has physical dimension units for sizing elements and decided to test on my screen. I set dimensions like so:

<div style = "background-color:black; height: 5in; width: 3in;"></div>

and then put a physical 3"x 5" (7.6cm x 12.7cm) flashcard against the screen.

It was significantly off in size.

Fun note - setting size in mm was ridiculously off - I expected to get the same results as with inches.

With that said, is there a way to do what I need?

Solution

In CSS, one inch does not equal one physical inch. It equals 96px.

This section of the spec may help you:

5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units

The absolute length units are fixed in relation to each other and anchored to some physical measurement.

If the anchor unit is the pixel unit, the physical units might not match their physical measurements.

Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels

Answered By - Michael Benjamin