Is there a way to tell/set, how many millimeters an element has, which works across various devices?
For example, I would like to create a white window which is 100 x 100 mm, with a black 10 x 10 mm square in the middle, which would have those dimensions on desktop, tablet, print, ...
I don't mind to use very latest browser but it has to use HTML/JS/CSS.
PS: Related: is there a way to tell, how many millimeters the screen has?
Edit
In other words, the problem is that using CSS units like pt, mm, cm, ... does not work as browser vendors decided to hardcode 96 DPI into the agents, according to here. Is there anything one can do to get real, physical, dimensions on web?
Not really.
In theory you can set lengths using mm units, but this requires that the browser accurately handles the DPI of the display … and browsers tend to assume a fixed value instead of getting the real one.
If that worked, you could then get the width in that unit by creating an off-screen element of known physical dimensions, reading the pixel dimensions using JavaScript and using that ratio to convert the pixel dimensions of any other element to mm.
In practice, if you need accurate measurements you are pretty much limited to drawing something on screen and asking the user to measure it with a ruler to get your ratio.
Alternatively, if you can identify the specific device in use (which the User Agent String may tell you for some devices) and you keep a database of the physical sizes of those devices (so this is limited to a subset of phones and tablets and won't work if they are connected to an external display) you could use that to determine the dimensions.
cm and mm can be used as CSS units , For more information please have a look at
http://www.w3.org/TR/css3-values/#lengths
16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
Im not sure how well they work in high screen density devices..
