CSS英寸/毫米测量结果不准确 [英] CSS inch/mm measurements not accurate
问题描述
我目前正在开发一种用于从浏览器打印标签的工具.我遇到一个有趣的问题，我的标签为2.25英寸x 1.25英寸.因此，我将div的打印CSS设置为width: 2.25in; height: 2.25in;
I am currently developing a tool for printing labels from the browser. I am running in to an interesting issue where I have labels that are 2.25" x 1.25". As such I have set my print CSS for a div to width: 2.25in; height: 2.25in;
在镀铬检查器中，尺寸正确显示为2.25英寸； 1.25英寸另外，我的打印机已正确配置为完全相同的坐标.
In the chrome inspector, the dimensions appear properly as 2.25in; by 1.25in. Also, my printer is configured correctly as the same coordinates exactly.
当需要打印时，我实际上得到的预览无法填充整个2.25x1.25打印预览.
When the time comes to print I am actually getting a preview that does not fill the entire 2.25x1.25 print preview.
http://imgur.com/K3BFSgg,CvToRSK,41fqK9D,vIL9lca
虚线边框是2.25x1.25英寸div的边框.完全不准确的测量.
The dotted border is the border of the 2.25x1.25 inch div. Completely inaccurate measurement.
有关可能出问题的任何建议或提示?谢谢:)
Any advice or tips on what could be going wrong? Thank you :)
推荐答案
One inch in CSS (1 in) is defined as 96 pixels (source).
This works on low-density devices where 1 physical pixel = 1 screen pixel.
在像打印机这样的高dpi(每英寸点数)设备上，它实际上并不起作用.
On high-dpi (dots per inch) devices like printers, it doesn't really work, though.
根据需要填充整个视口，也许您应该看看vh和vw单位.
在此处中进行了描述.
Seing as you want it to fill the whole viewport, maybe you should take a look at the vh and vw units.
They're described here.
vh代表视口高度，而vw(您猜对了)代表视口宽度.
vh stands for viewport-height and vw (you guessed it) stands for viewport-width.
长话短说，1 vh = 1% of screen height，与vw相同(只是宽度).
Long story short, 1 vh = 1% of screen height, same for vw (except it's the width).
这篇关于CSS英寸/毫米测量结果不准确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
