如何为元素设置物理尺寸(如实际英寸)?

How to set physical dimensions (like actual inches) for elements?

我的最终目标是在每个屏幕上显示完全相同大小的图像(是的,我确实需要这个)。

我开始阅读有关如何获取用户屏幕尺寸的信息 here - 答案似乎是不可能的(不调用 API 试图根据某些信息猜测实际设备参数).

然后我想起 css 有用于调整元素大小的物理尺寸单位,并决定在我的屏幕上进行测试。我这样设置尺寸:

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

然后将实体的 3"x 5" (7.6cm x 12.7cm) 抽认卡放在屏幕上。

尺码明显偏小。

有趣的注意事项 - 以毫米为单位的尺寸设置太离谱了 - 我希望得到与英寸相同的结果。

话虽如此,有没有办法满足我的需求?

在CSS中,一英寸不等于物理上的一英寸。它等于 96px.

规范的这一部分可能对您有所帮助:

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

The absolute length units are fixed in relation to each other and anchored to some physical measurement.

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

我正处于 Beta 测试的后期阶段,在这里 this.Device 对这个问题进行了可靠的回答。这是一个纯数学解决方案,不需要数据库。我很想知道它是否适合你。