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

有没有办法在JavaScript函数中访问屏幕显示的DPI设置？如何通过JavaScript访问屏幕显示的DPI设置？

我想在页面上放置一个HTML面板，并且当用户的DPI设置为大（120）时，它会抛出该位置。我需要能够知道DPI是什么，所以我可以相应地调整位置。

来源

2009-01-24 Yttrium

首先，以帮助与术语DPI的可能的（并且很常见）混乱（每英寸点数）：

DPI不完全是“显示设置”的一部分。这是（错误）在两个不同的上下文中使用：

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

当打印图像时，存在影响在纸张上的图像的最终尺寸许多事情：

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

底线是，您正在打印的图像将被有效地重新采样（缩小或放大）以匹配打印过程中使用的最终DPI。任何一方都可能造成这种情况（程序，打印驱动程序，打印机）。

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

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

来源

2009-01-25 01:59:43

尽管您无法更改物理DPI，您可以*更改将测量映射到像素的软件，该软件由软件，它具有任意值，通常通过EDID从监视器探测，但可以被覆盖。这是我认为OP的进展。 – 2009-01-26 05:38:10

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

指定“PT”您的测量和“时间”，这是屏幕相对指标。

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-25 01:18:00

的链接断开。 – ceving 2013-05-13 06:31:09

试试这个。 http://www.w3schools.com/cssref/css_units.asp – Sam 2013-10-28 03:09:34

`1pt = 1.33px`和`1pc = 16px`。无论dpi如何，因为浏览器假定“1in = 96px”，这是不真实和不正确的... – 2013-12-13 14:12:38

貌似可以在IE中使用 '屏幕' 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; 
}

来源

2009-05-08 08:14:44

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

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

来源

2016-06-02 20:51:45 ygoe

-2

$(document).ready(function(){ 
 
     $("body").append("<div style='poosition:fixed;width:1cm;height:1cm;'class='SCREENDPITEST'></div>") 
 
     screen.dpi = Math.floor($(".SCREENDPITEST").width() * 2.54); 
 
    \t $(".SCREENDPITEST").remove() 
 
     document.write(screen.dpi) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

来源

2017-01-29 19:52:00

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

回答

相关问题