CSS 英寸/毫米测量不准确

Question

我目前正在开发一种用于从浏览器打印标签的工具。我遇到了一个有趣的问题，我的标签为 2.25" x 1.25"。因此，我已将 div 的打印 CSS 设置为width: 2.25in; height: 2.25in;

在镀铬检查器中，尺寸正确显示为 2.25 英寸；由 1.25 英寸。此外，我的打印机正确配置为完全相同的坐标。

当需要打印时，我实际上得到的预览并未填满整个 2.25x1.25 打印预览。

虚线边框是 2.25x1.25 英寸 div 的边框。完全不准确的测量。

关于可能出什么问题的任何建议或提示？谢谢：）

Answer 1

CSS ( 1 in) 中的一英寸定义为 96 像素（来源）。
这适用于低密度设备，其中 1 个物理像素 = 1 个屏幕像素。

但在打印机等高 dpi（每英寸点数）设备上，它实际上不起作用。

既然您希望它填充整个视口，也许您应该看看vh和vw单位。此处
对其进行了描述。

vh代表视口高度，vw（你猜对了）代表视口宽度。

长话短说，1 vh = 1% of screen height相同vw（除了宽度）。