当前位置：文江博客话题详情

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

发布于 2024-07-12 06:55:01 字数 134 浏览 9 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

年少掌心 2024-07-19 06:55:01

看起来你可以在 IE 中使用“屏幕”DOM 对象，它具有 deviceXDPI、deviceYDPI、logicXDPI、logicYDPI 属性。

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

这是一个解决方案来自 http://www.webdeveloper.com/forum/showthread.php?t =175278
（我还没试过，看起来完全是黑客:)
只需创建 1 英寸宽的东西并以像素为单位进行测量即可！

console.log(document.getElementById("dpi").offsetHeight);

#dpi {
    height: 1in;
    left: -100%;
    position: absolute;
    top: -100%;
    width: 1in;
}

<div id="dpi"></div>

Looks like you can use the 'screen' DOM object in IE, its got properties for deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI.

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

Here's a solution from http://www.webdeveloper.com/forum/showthread.php?t=175278
(i havent tried it, seems like a total hack :)
Just create something 1 inch wide and measure it in pixels!

console.log(document.getElementById("dpi").offsetHeight);

#dpi {
    height: 1in;
    left: -100%;
    position: absolute;
    top: -100%;
    width: 1in;
}

<div id="dpi"></div>

回复收藏 0 原文

夜雨飘雪 2024-07-19 06:55:01

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

DPI 并不完全是“显示设置”的一部分。它被（错误地）用在两种不同的环境中：

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

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

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

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

~~现在回到你的问题。不，您无法确定屏幕的 DPI，因为它不在软件域中。这是一个硬件领域术语，描述用户可以购买多大的显示器。~~ 更新：我最初是在 2009 年根据对当前技术的了解写下这个答案的。正如 @thure 指出的，您现在（从 2012 年开始？）可以使用窗口.matchMedia 函数来确定屏幕的DPI。

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

Firstly, to help with the possible (and very common) confusion with the term DPI (dots per inch):

DPI isn't exactly a part of "display settings". It's (mis)used in two different contexts:

The native pixels per inch of a display (or video). It determines how small the pixels are. You can have the same 1024x768 resolution on both a 14" laptop screen and a 17" LCD monitor. The former would roughly be 1280/14 = 91 DPI and the latter would roughly be 1280/17 = 75 DPI. The DPI of a screen is immutable; it can't be changed with display settings. More...
The dots per inch painted on paper during printing. This is the number of side-by-side dots a printer/photocopier/fax machine can imprint within an inch of paper. Most printers can be set to print at a lower DPI, by just printing each dot as two, four, etc. dots. More...

When printing an image, there are many things that affect the final dimensions of the image on paper:

The dimensions of the source image -- this is the amount of pixels or data there is.
The DPI of the source image. This value determines how the dimensions should be interpreted when printing the image.
If the source image doesn't have embedded DPI information (a JPEG can have one, a GIF never does), the program that's being used may have settings to specify a DPI. This could be an image viewer/editor or even a web browser.
The zoom factor that's typically specified in a print dialog.
The current DPI setting of the printer.
The physical (max) DPI of the printer.

The bottom line is, the image that you're printing will effectively get resampled (reduced or enlarged) to match the final DPI that's used in the print process. Any of the parties involed may be causing this (the program, the print driver, the printer).

Now, coming back to your question. No, you can't determine the DPI of the screen, because it's not in software domain. It's a hardware domain term, describing how large a monitor a user could afford to buy. Update: I initially wrote this answer back in 2009, with my understanding of the current technologies. As @thure pointed out, you can now (since 2012?) use the window.matchMedia function to determine the DPI of the screen.

If you're trying to achieve precision in printing an HTML layout, as others have suggested, your CSS should use print dimensions like em, pt or pc instead of px. However, the final outcome might still depend on the browser using. If converting your HTML to PDF (or generating PDF from scratch) is an option for you, printing a PDF would give you the truest WYSIWYG both on screen and paper.

回复收藏 0 原文

半枫 2024-07-19 06:55:01

您可以使用 window.devicePixelRatio< /a> 属性获取屏幕/页面的缩放比例。这在桌面版 (Windows) 上当前的 IE、Edge、Chrome 和 Firefox 中运行良好，但它似乎不是当前的标准。它在配备传统显示器的台式电脑上返回 1，在具有 200% 缩放比例的 Surface 上返回 2。如今，值的范围应为 1.0 到 3.0。我可以使用它来校正动态图像服务大小，以便在高分辨率屏幕上提供更清晰的图像。

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

回复收藏 0 原文

兮子 2024-07-19 06:55:01

据我所知，没有一种方法，但是，它们可能是替代解决方案：

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

http://www.w3schools.com/cssref/css_units.asp

https://css-tricks.com/the- css 长度/

他们：
1em 等于当前字体大小。 2em 表示当前字体大小的 2 倍。例如，如果元素以 12 pt 字体显示，则 '2em' 为 24 pt。 'em' 是 CSS 中非常有用的单位，因为它可以自动适应读者使用的字体
pt：
点（1 pt 与 1/72 英寸 相同）
电脑：
异食癖（1 pc 与 12 点相同）