CSS 英寸/毫米测量值不准确

Question

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

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

到了打印时，我实际上得到的预览并没有填满整个 2.25x1.25 打印预览。

http://imgur.com/K3BFSgg,CvToRSK,41fqK9D,vIL9lca

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

对于可能出现的问题有任何建议或提示吗？谢谢你:)

Answer 1

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

不过，在打印机等高 dpi（每英寸点数）设备上，它并不能真正发挥作用。

---

按照您的意愿填充整个视口，也许您应该看看vh 和vw 单位。
他们被描述为here。

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

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