I have 27' 4k monitor and would like to present 10cm on the web page as it represented as real dimension in real world.
I'm using Windows 10 with scaling set to 175%. Chrome console devicePixelRatio also says: 1.75
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<div style="border: 1px solid red; width: 100mm; height: 10mm;"> </div>
</body>
</html>If I measure this with a physical rules, this is actually 10.4 cm on the screen. Probably there are some deviations of how to translate 10cm CSS to physical device, but ok nearly 10cm.
What I don't understand is, if I change my scaling to 100%, then CSS 10cm is measured 6cm with physical ruler. The Rectangle is visible smaller on the screen. I logged-out, even restarted my machine, but the result is the same.
Shouldn't CSS 10cm be the same no matter the scaling I have set for my monitor in Windows Display properties?
I also briefly looked at this article: https://www.html5rocks.com/en/mobile/high-dpi/ which explains how device pixel ratio is calculated and related things to this.
Even if scaling is 100% and devicePixelRatio is then 1, why doesn't browser draws 10cm as actually 10cm?
I'm aware of devicePixelRatio history:
A typical full screen desktop monitor is a roughly 24" at 1920x1080 resolution. Imagine if that monitor was shrunk down to about 5" but had the same resolution. Viewing things on the screen would be impossible because they would be so small. But manufactures are coming out with 1920x1080 resolution phone screens consistently now.
So the device pixel ratio was invented by phone makers so that they could continue to push the resolution, sharpness and quality of phone screens, without making elements on the screen too small to see or read.
One solution would be that user inputs his/hers monitor diagonal in inches then, and we manually calculate PPI (https://www.calculatorsoup.com/calculators/technology/ppi-calculator.php), but if CSS supports mm, cm should this work out of the box?
I understand that javascript does not have API support to get monitor diagonal, but I assume web browser does.