Web and physical units

Question

Is there a way to tell / set how many millimeters an element has that works on different devices?

For example, I would like to create a white window 100 x 100 mm in size with a squared 10 x 10 mm square in the middle, which will have such dimensions on a desktop, tablet, print, ...

I do not mind using the latest browser, but it should use HTML / JS / CSS.

PS: Linked: is there a way to say how many millimeters of the screen?

Edit

In other words, the problem is that using CSS units such as pt, mm, cm, ... does not work, as browser developers decided to hardcode 96 DPI into agents, according to. Is there anything that can be done to get real, physical, measurements online?

Answer 1

Not really.

In theory, you can specify lengths using mm units, but this requires the browser to accurately process the display DPI ... and browsers usually take a fixed value instead of getting the real one.

If this works, you can get the width in this module by creating an element outside of the visible physical dimensions, reading pixel sizes using JavaScript and using this ratio to convert the pixel sizes of any other element to mm.

In practice, if you need accurate measurements, you are pretty much limited to drawing something on the screen and ask the user to measure it with a ruler to get a ratio.

Alternatively, if you can determine the specific device you are using (which the user agent string for some devices can indicate), and you keep a database of the physical sizes of these devices (therefore this is limited to a subset of phones and tablets and will not work if they are connected to an external display), you can use this for sizing.

Answer 2

cm and mm can be used as CSS units. For more information, please take a look at http://www.w3.org/TR/css3-values/#lengths

16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

I'm not sure how well they work on devices with high screen density.