如何通过JavaScript访问屏幕显示的DPI设置?
有没有办法访问Javascript函数中的屏幕显示的DPI设置?
我试图在页面上放置一个HTML面板,当用户的DPI设置为较大(120)时,它将抛出该位置。 我需要能够知道DPI是什么,所以我可以相应地调整位置。
首先,为了帮助解决DPI(每英寸点数)这个术语的可能(和非常常见的)混淆:
DPI不完全是“显示设置”的一部分。 这是(错误)在两个不同的情况下使用:
- 每英寸显示器(或video)的原生像素。 它决定了像素有多小。 您可以在14英寸笔记本电脑屏幕和17英寸液晶显示器上使用相同的1024×768分辨率。 前者大致为1280/14 = 91 DPI,后者大致为1280/17 = 75 DPI。 屏幕的DPI是不可改变的; 它不能用显示设置来改变。 更多…
- 打印过程中,每英寸的点数会涂在纸上。 这是打印机/复印机/传真机可以在一英寸的纸张上打印的并排点数。 大多数打印机可以设置为以较低的DPI进行打印,只需将每个点打印为两个,四个等点。 更多…
在打印图像时,有很多事情会影响纸上图像的最终尺寸:
- 源图像的尺寸 – 这是像素或数据的数量。
- 源图像的DPI。 该值确定打印图像时应如何解释尺寸。
- 如果源图像没有embedded的DPI信息(JPEG可以有一个,GIF永远不会),正在使用的程序可能有指定DPI的设置。 这可能是一个图像浏览器/编辑器,甚至是一个网页浏览器。
- 通常在打印对话框中指定的缩放系数。
- 打印机当前的DPI设置。
- 打印机的物理(最大)DPI。
底线是,您正在打印的图像将被有效地重新采样(缩小或放大),以匹配打印过程中使用的最终DPI。 任何一方可能会造成这种情况(程序,打印驱动程序,打印机)。
现在,回到你的问题。 不,您无法确定屏幕的DPI,因为它不在软件域中。 这是一个硬件领域的术语,描述了用户可以购买的显示器的大小。 更新:我最初在2009年写了这个答案,以我对当前技术的理解。 正如@thure所指出的,你现在可以(自2012年起)使用window.matchMedia函数来确定屏幕的DPI。
如果你正在尝试打印一个HTML布局的精度,正如其他人所build议的,你的CSS应该使用像em,pt或pc而不是px的打印尺寸。 但是,最终的结果可能仍然取决于浏览器的使用。 如果将HTML转换为PDF(或从头开始生成PDF)是您的一个select,则打印PDF将为您提供屏幕和纸张上最真实的所见即所得(WYSIWYG)。
- 对dpi的误解
- 新闻部,生产者价格指数,像素 – 事实和谬误
看起来你可以在IE中使用'screen'DOM对象,它具有deviceXDPI,deviceYDPI,logicalXDPI,logicalYDPI的属性。
hxxp://www.w3schools.com/htmldom/dom_obj_screen.asp
这是从http://www.webdeveloper.com/forum/showthread.php?t=175278 (我还没有尝试过,似乎是一个彻头彻尾的破解:)的解决scheme只是创build一个1英寸宽的东西,并在像素测量!
HTML:
<div id="dpi"></div>
样式:
#dpi { height: 1in; left: -100%; position: absolute; top: -100%; width: 1in; }
使用Javascript:
function getDPI() { return document.getElementById("dpi").offsetHeight; }
您可以使用window.devicePixelRatio
属性来获取屏幕/页面的缩放比例。 这在目前的IE,Edge,Chrome和桌面上的Firefox(Windows)上运行良好,但它似乎并不是目前的标准。 它在传统的显示器上在我的台式电脑上返回1,在200%缩放下在Surface上返回2。 这些天的数值应该在1.0到3.0之间。 我可以使用它来纠正dynamic图像的服务大小,以在高分辨率的屏幕上提供更清晰的图像。
如果你需要一些逻辑的dpi / ppi,把这个值乘以96,但它不会是实际的物理ppi,只是OS对待它。
但是,我不知道有什么方法可以作为替代scheme:
在屏幕相对指标“pt”和“em”中指定您的测量值。
http://www.w3schools.com/cssref/css_units.asp
https://css-tricks.com/the-lengths-of-css/
- EM:
1em
等于当前的字体大小。2em
表示当前字体大小的2倍。 例如,如果一个元素以'2em'
的字体显示,那么'2em'
是24 pt
。'em'
是CSS中非常有用的单位,因为它可以自动适应读者使用的字体- PT:
点(1 pt
与1/72 inch
相同)- PC:
异食癖(1 pc
是相同的12 points
)
$(document).ready(function(){ $("body").append("<div style='poosition:fixed;width:1cm;height:1cm;'class='SCREENDPITEST'></div>") screen.dpi = Math.floor($(".SCREENDPITEST").width() * 2.54); $(".SCREENDPITEST").remove() document.write(screen.dpi) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>