How to simulate real world dimensions in css?

Question

I want to make a website, where an object which has for example a width of 100mm, is displayed with that width no matter what resolution the monitor or smartphone has.

For that reason I'm asking the user for his display dimensions to calculate the right ppi. However it doesn't work on all devices.

EDIT: This is the code I have so far:

var dpr = window.devicePixelRatio;
var inch = 25.4;

var pixelHeight = screen.height * dpr;
var pixelWidth = screen.width * dpr;

function calculatePpi(monitorDiagonal) {
    return (Math.sqrt(Math.pow(pixelWidth, 2) + Math.pow(pixelHeight, 2))) / monitorDiagonal;
}

function mmToPx(mm) {
    return  (((mm / inch) * calculatePpi(monitorDiag)));
}

Answer 1

Use css height and width.

The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

So if for example you want to show 35cm width and 50cm height element you can set it with css:

#example {
  height: 50cm;
  width: 35cm;
}

Good luck!

---

It seems that although this should work, it's not enough accurate. See comments.