57

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

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

4

4 回答 4

48

看起来您可以在 IE 中使用“屏幕”DOM 对象，它具有 deviceXDPI、deviceYDPI、logicalXDPI、logicalYDPI 的属性。

https://www.w3schools.com/jsref/obj_screen.asp

这是来自http://www.webdeveloper.com/forum/showthread.php?t=175278的解决方案 （我没有尝试过，似乎完全是 hack :) 只需创建 1 英寸宽的东西并以像素为单位进行测量！

console.log(document.getElementById("dpi").offsetHeight);
#dpi {
    height: 1in;
    left: -100%;
    position: absolute;
    top: -100%;
    width: 1in;
}
<div id="dpi"></div>

于 2009-05-08T08:14:44.013 回答
35

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

DPI 不完全是“显示设置”的一部分。它在两种不同的情况下（误用）：

  1. 显示器（或视频）每英寸的原生像素。它决定了像素有多小。您可以在 14" 笔记本电脑屏幕和 17" LCD 显示器上拥有相同的 1024x768 分辨率。前者大致为 1280/14 = 91 DPI，后者大致为 1280/17 = 75 DPI。屏幕的 DPI 是不可变的；它不能通过显示设置进行更改。更多的...
  2. 打印过程中在纸上绘制的每英寸点数。这是打印机/复印机/传真机可以在一英寸纸上打印的并排点数。大多数打印机可以设置为以较低的 DPI 打印，只需将每个点打印为两个、四个等点。更多的...

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

  • 源图像的尺寸——这是像素或数据的数量。
  • 源图像的 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 将为您在屏幕和纸张上提供最真实的所见即所得。

于 2009-01-25T01:59:43.697 回答
31

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

如果您需要一些逻辑 dpi/ppi，请将该值乘以 96。不过，它不是实际的物理 ppi，而是操作系统对待它的方式。

于 2016-06-02T20:51:45.133 回答
3

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

在“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：
    点（1 pt与 相同1/72 inch）
  • pc：
    异食癖（1 pc同12 points）
于 2009-01-25T01:18:00.113 回答