如何通过JavaScript访问屏幕显示的DPI设置?

有没有办法访问Javascript函数中的屏幕显示的DPI设置?

我试图在页面上放置一个HTML面板,当用户的DPI设置为较大(120)时,它将抛出该位置。 我需要能够知道DPI是什么,所以我可以相应地调整位置。

首先,为了帮助解决DPI(每英寸点数)这个术语的可能(和非常常见的)混淆:

DPI不完全是“显示设置”的一部分。 这是(错误)在两个不同的情况下使用:

  1. 每英寸显示器(或video)的原生像素。 它决定了像素有多小。 您可以在14英寸笔记本电脑屏幕和17英寸液晶显示器上使用相同的1024×768分辨率。 前者大致为1280/14 = 91 DPI,后者大致为1280/17 = 75 DPI。 屏幕的DPI是不可改变的; 它不能用显示设置来改变。 更多…
  2. 打印过程中,每英寸的点数会涂在纸上。 这是打印机/复印机/传真机可以在一英寸的纸张上打印的并排点数。 大多数打印机可以设置为以较低的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 pt1/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> 
Interesting Posts