在HTML页面上，我想画一条定义长度的线，比如5cm。这条线应该总是正好5厘米，
- 在每种类型的显示器上
- 无论物理监视器大小
- 选择每个监视器分辨率
- 选择任何屏幕缩放
- 每个浏览器的缩放级别
我找到了一种方法来做到这一点，但这需要用户校准：显示一些可伸缩的线，让用户在旁边放一张银行卡(长度已知(，让用户调整线的大小，直到它适合卡的长度，然后计算完美的比例。
但是，如果没有用户操作，我怎么能得到结果呢？
我认为，最简单的方法是在CSS中使用"cm"。没有。一个"厘米"在我的智能手机上是4毫米，但在我的显示器上是12毫米。
我试过用window.devicePixelRatio进行除法。在现代显示器上，这可以处理大约20%的错误，设置为建议的分辨率。当我更改浏览器缩放和刷新时，长度保持不变。它在我的智能手机上不起作用，因为我的长度要小得多，横向和纵向的效果也不一样。当我将显示器分辨率设置为较低的值时，这不起作用。如果我将24〃；和一个27〃；具有相同分辨率的监视器。
我想在浏览器(也许还有openlayers(中使用html/css/javascript来实现这一点。
不幸的是，这是最难做的事情之一。CSS中有一个单位cm和mm，但它们实际上是直接从像素值转换而来的：1 cm = 37.795 px。像素值，其本身在每个显示器上是相对的。
对于使用厘米单位，你可以写：
<div id="line-5cm"></div>
<style>
#line-5cm{
height: 4px;
width: 5cm;
background-color: black;
}
</style>
我试过了，div和width: 10cm;测量的是10.1cm，所以这看起来很准确。但我确信在某些设备上它不会起作用。
您可能想玩的另一个选项是head:中的元viewport
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
尝试更改这些值，看看是否可以提高准确性。
更多信息：
- https://medium.com/level-up-web/the-difference-between-css-units-px-pt-rem-em-vh-vw-ch-ex-and-the-rest-b2cfdf069230
- https://www.smashingmagazine.com/2021/07/css-absolute-units/