如何使用 JavaScript 检测屏幕 DPI

Question

到目前为止，我发现的唯一方法是获取height和width为一英寸的测试div元素的 offsetWidth、offsetHeight： http : //www.infobyip.com/detectmonitordpi.php

有没有办法通过 JavaScript 检测屏幕 DPI？

谢谢，

阿塔拉。

Answer 1

在 webkit 中，您可以通过简单地从以下位置检索值来检测您的用户是否有所谓的“高 dpi 屏幕”：

window.devicePixelRatio

正常的 dpi 屏幕将返回 1。iPhone 4 将返回 2，但也可以使用 1.8 或 2.12 等数字。

Answer 2

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
    dpi_x = document.getElementById('testdiv').offsetWidth;
    dpi_y = document.getElementById('testdiv').offsetHeight;
</script>

然后您可以使用 JQuery 将dpi_x和dpi_y发送到您的服务器

http://jsfiddle.net/sxfv3/

Answer 3

到目前为止，还没有标准的、支持无处不在的解决方案。

window.devicePixelRatio ，正如 laurens peeters 所建议的，如果你不关心 IE 或任何古代浏览器，比如 2013 年 1 月上旬（例如，Firefox 17），它确实有效。

请参阅Cross Browser Retina/High Resolution Media Queries （以及那里的各种评论和链接）以了解截至 2012 年底如何获取此信息，但您必须经常再次搜索并调整代码，直到最终得到某些信息标准化，并在每个浏览器中实现，具有足够广泛的版本采用，您可以不再关心旧版本......