3

我有 27' 4k 显示器，想在网页上显示 10 厘米，因为它代表现实世界中的真实尺寸。

我正在使用缩放设置为 175% 的 Windows 10。Chrome 控制台devicePixelRatio还说：1.75

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
  <div style="border: 1px solid red; width: 100mm; height: 10mm;">&nbsp;</div>
</body>
</html>

如果我用物理规则测量，这实际上是屏幕上的 10.4 厘米。可能在如何将 10cm CSS 转换为物理设备方面存在一些偏差，但可以接近 10cm。

我不明白的是，如果我将缩放比例更改为 100%，那么 CSS10cm是6cm用物理标尺测量的。矩形在屏幕上可见较小。我注销了，甚至重新启动了我的机器，但结果是一样的。

CSS 10cm无论我在 Windows 显示属性中为显示器设置的缩放比例如何，都不应该相同吗？

在此处输入图像描述

我还简要地看了这篇文章：https ://www.html5rocks.com/en/mobile/high-dpi/ ，它解释了如何计算设备像素比以及与此相关的事情。

即使缩放为 100% 并且 devicePixelRatio 为 1，为什么浏览器不绘制10cm实际10cm？

我知道 devicePixelRatio 历史：

典型的全屏桌面显示器大约为 24 英寸，分辨率为 1920x1080。想象一下，如果该显示器缩小到大约 5 英寸但具有相同的分辨率。在屏幕上查看东西是不可能的，因为它们太小了。但是制造商现在一直在推出 1920x1080 分辨率的手机屏幕。

因此，手机制造商发明了设备像素比，以便他们可以继续推动手机屏幕的分辨率、清晰度和质量，而不会使屏幕上的元素太小而无法看到或阅读。

一种解决方案是用户以英寸为单位输入他/她的显示器对角线，然后我们手动计算 PPI（https://www.calculatorsoup.com/calculators/technology/ppi-calculator.php），但如果 CSS 支持mm，cm应该这样开箱即用？

我知道 javascript 不支持获取监视器对角线的 API，但我认为 Web 浏览器支持。

4

0 回答 0