如何设置元素的物理尺寸（如实际英寸）？

Question

我的最终目标是在每个屏幕上显示相同尺寸的图像（是的，我确实需要这样做）。

我开始阅读有关如何获取用户屏幕大小here的信息 - 答案似乎是不可能的（没有调用基于某些参数来尝试猜测实际设备的API）。

然后我记得css具有用于调整元素大小的物理尺寸单位，并决定在我的屏幕上进行测试。我设置尺寸如下：

<div style = "background-color:black; height: 5in; width: 3in;"></div>

然后在屏幕上放一块物理的3“x 5”（7.6cm x 12.7cm）闪卡。

它的大小非常明显。

有趣的注意事项 - 以mm为单位的设置大小是荒谬的 - 我希望得到与英寸相同的结果。

话虽如此，有没有办法做我需要的？

Answer 1

在CSS中，一英寸不等于一个物理英寸。它等于96px。

本规范的这一部分可以帮助您：

5.2. Absolute lengths: the cm, mm, q, in, pt, pc, px units

  

绝对长度单位相对于彼此固定   固定在一些物理测量上。

     

如果锚单位是像素单位，则物理单位可能不是   匹配他们的物理测量。

     

或者，如果锚单元是物理单元，则是像素单元   可能无法映射到整数设备像素