Question

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

我正在尝试在页面上放置HTML面板，当用户的DPI设置为大（120）时，它会关闭该位置。我需要能够知道DPI是什么，所以我可以相应地调整位置。

Answer 1

看起来你可以在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的解决方案（我还没试过，看起来像是一个彻底的黑客:) 只需创建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;
}

Answer 2

首先，为了帮助解决术语DPI（每英寸点数）可能（并且非常常见）的混淆：

DPI并非“显示设置”的一部分。它（错误）用于两种不同的背景：

显示器（或视频）的每英寸原始像素数。它决定了像素的小小。您可以在14英寸笔记本电脑屏幕和17英寸液晶显示器上使用相同的1024x768分辨率。前者约为1280/14 = 91 DPI，后者约为1280/17 = 75 DPI。屏幕的DPI是不可变的;它无法通过显示设置进行更改。 More...
打印期间每英寸点涂在纸上。这是打印机/复印机/传真机可以在一英寸纸张内打印的并排点数。大多数打印机可以设置为以较低的DPI打印，只需将每个点打印为两个，四个等点。 More...

打印图像时，有许多因素会影响纸张上图像的最终尺寸：

源图像的尺寸 - 这是像素或数据的数量。
源图像的DPI。此值确定打印图像时应如何解释尺寸。
如果源图像没有嵌入的DPI信息（JPEG可以有一个，GIF从不这样做），正在使用的程序可能具有指定DPI的设置。这可以是图像查看器/编辑器，甚至是Web浏览器。
通常在打印对话框中指定的缩放系数。
打印机的当前DPI设置。
打印机的物理（最大）DPI。

最重要的是，您正在打印的图像将被有效地重新采样（缩小或放大）以匹配打印过程中使用的最终DPI。任何被调用方都可能导致此问题（程序，打印驱动程序，打印机）。

~~现在，回到你的问题。不，您无法确定屏幕的DPI，因为它不在软件域中。这是一个硬件领域术语，描述用户可以买得多的监视器。~~ 更新：我最初在2009年写了这个答案，我对当前的技术有所了解。正如@thure指出的那样，你现在可以（自2012年起？）使用window.matchMedia函数来确定屏幕的DPI。

如果您正在努力实现打印HTML布局的精确度，正如其他人所建议的那样，您的CSS应该使用打印尺寸，如em，pt或pc而不是px。但是，最终结果可能仍取决于浏览器的使用情况。如果将HTML转换为PDF（或从头开始生成PDF）是一种选择，打印PDF将为您提供屏幕和纸张上最真实的所见即所得。

Answer 3

您可以使用window.devicePixelRatio属性来获取屏幕/页面的缩放比例。这在桌面（Windows）上的当前IE，Edge，Chrome和Firefox中运行良好，但它似乎不是当前的标准。它在我的桌面PC上使用传统显示器返回1，在Surface上以2％缩放返回2。这些天的值应该在1.0到3.0之间。我可以使用它来校正动态图像的大小，以便在高分辨率屏幕上提供更清晰的图像。

如果你需要一些逻辑dpi / ppi，那么将该值乘以96.它不会成为实际的物理ppi，只是操作系统对待它的方式。

Answer 4

我知道没有办法，但是，它们可能是另一种解决方案：

在'pt'和'em'中指定您的测量值，它们是屏幕相对指标。

<强> http://www.w3schools.com/cssref/css_units.asp

<强> https://css-tricks.com/the-lengths-of-css/

EM：
  1em等于当前的字体大小。 2em表示当前字体大小的2倍。例如，如果元素显示为12 pt字体，则'2em'为24 pt。 'em'是CSS中非常有用的单元，因为它可以自动适应读者使用的字体

PT：
  point（1 pt与1/72 inch）
相同
PC：
  异食癖（1 pc与12 points）
相同

如何通过javascript访问屏幕显示的DPI设置？

4 个答案: