如何通过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 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>
Interesting Posts