问题
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;
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.
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
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 :)
回答1:
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.
On high-dpi (dots per inch) devices like printers, it doesn't really work, though.
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 stands for viewport-height and vw (you guessed it) stands for viewport-width.
Long story short, 1 vh = 1% of screen height, same for vw (except it's the width).
来源：https://stackoverflow.com/questions/37791498/css-inch-mm-measurements-not-accurate