How Emulate Real Size Dimensions In Css/javascript

I need to display an object with its real size on a web app. If an object has 85mm width, so should it also be displayed on the screen (ipad 1,2,3 and androids). I tried to set the

Solution 1:

As @feeela mentioned, the cm, in, mm, etc units do not correspond to real life dimensions. There is also no way to get the specific device DPI, the nearest you get is the window.devicePixelRatio property. One way to solve the problem would be using external libraries like Detector to determine the exact device the user is in and then assign any hard coded Pixel density to it as listed in wikipedia. Once you somehow have the density you can easily convert any dimension to the desired size. For example, on an Ipad3:

var dpr     = window.devicePixelRatio;
var inch    = 25.4; //1inch = 25.4 mmvar ppi     = 264; //Ipad3 densityfunctionmmToPx(mm){
    return ((mm/inch)*ppi)/dpr;
}

myElement.width = mmToPx(size_in_mm);

I hope it helps anybody with the same problem…

Solution 2:

This statement on MDN reads as it should work on devices with a high resolution:

For low-dpi devices, the unit px represents the physical reference pixel and the others are defined relative to it. Thus, 1in is defined as 96px which equals 72pt. The consequence of this definition is that on such devices, length described in inches (in), centimeters (cm), millimeters (mm) doesn't necessary match the length of the physical unit with the same name.

For high-dpi devices, inches (in), centimeters (cm), millimeters (mm) are defined as their physical counterparts. Therefore the px unit is defined relative to them (1/96 of 1 inch).

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/length

And then there is also mozmm – » An experimental unit which attempts to render at exactly one millimeter regardless of the size or resolution of the display.« (See the link above.)