Is it possible to get real inches with CSS?
css, html, javascript
Solution
Yes, it's possible--measurements like in, cm, and mm are accepted. The conversion from the length to a number of pixels is handled by the system. The W3C doesn't recommend them for use on screens, though, since the machine in question has to support the conversion.
Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.
Note that this definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.)
(Source: http://www.w3.org/TR/CSS21/syndata.html#length-units)
Problem
Is it possible to draw an element, say a div, to a width in inches and have a reasonable likelihood that the element will in fact, be that width (in inches), especially when moving to other devices? Or is the answer to this, simply, no, and you'll end up with scale like 1in = 96px Edit: Try using CSS inches on an element and then hold up a ruler to the element and see my dilemma Edit: In 2014, do I really have to have my users hold up a ruler to the screen to get the ratio I need? Edit to reopen: I am creating an app where one of the elements MUST be (per requirements of the application) a fixed width in inches across different devices - limited to tablets and desktops (screen no less than 1024 x 768). I have seen answers suggesting you need to have your users physically measure and calibrate this area to give you a ratio that can be used with px. Is this really the only way to do this? Having your users hold a ruler up the screen? Edit: Why do I need to do this, some people have asked? I am taking a product which does exist in the physical world and virtualizing it - this product requires human interaction and scaling the sizes does not work, it must remain at a fixed width across devices.