JS获取DPI解决打印页面像素计算问题
文 / @UTHEME
一般电脑默认96DPI或72DPI,JS可以通过以下方法获取DPI的值:
function get_dpi() { for (var i = 56; i < 2000; i++) { if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) { return i; } } }
有了DPI值就可以计算出毫米与像素之间的等值:
1毫米=DPI/25.4
因为DPI为每英寸长度内的像素点数,1英寸=25.4mm,所以DPI除以25.4就是1毫米的像素数。
根据以上,我们可以计算96DPI下的A4纸页面像素大小:
宽:210mm×(96/25.4)≈794px 高:297mm×(96/25.4)≈1123px
注意计算得到的结果是向上取整的,因此,如果指定页面的高度为1123px,打印时会显示2页,即多出一个空白页。
最好的办法还是在JS中为打印页面指定高度:
height = 297*(DPI/25.4)
有了毫米与像素的单位换算,以及页面的宽度、高度像素,就可以非常精确的控制打印页面样式了,实际上就是在编写一个宽794px和高1123px的页面。
注意:浏览器打印页面可以设置边距,默认情况下是有边距的,我们可以使用打印样式设置这个边距,从而将打印边距的控制权也掌握在自己手里。
@page { size: A4 portrait; margin: 0; }
以上CSS样式设置打印页面大小为A4纸,纵向打印,横向打印为landscape,margin属性指定页边距。

相关文章
-
WordPress插件:All in One WP Security & Firewall 怎么样(附:AIOWPS拦截垃圾评论设置教程) 2023-01-26 21:51:51
-
在 PHP 中如何通过一行代码就交换两个变量的值 2023-01-26 00:18:31
-
WordPress主题:Pin Premium (WordPress仿Pinterest样式瀑布流主题) 2023-01-25 23:36:43
-
免费WordPress主题:Maupassant(WordPress中文博客主题) 2023-01-25 23:31:29
-
WordPress响应式图片(Responsive Image)功能关闭:取消WordPress图片宽带和高度参数 2023-01-24 10:49:32
-
wordpress报错:修复MySQL 1064错误问题 错误原因和解决方法 2023-01-24 10:42:04
-
WP Rocket – 强大的WordPress缓存加速优化插件(附:WP Rocket插件设置过程与七折优惠码) 2023-01-24 00:41:44
-
WordPress 实现静态化搜索结果页面的方法 2023-01-24 00:41:44
-
get_permalink、get_the_permalink和the_permalink有啥区别? 2023-01-24 00:41:08
-
为什么选用WordPress搭建独立站? 2023-01-23 20:25:21