如何使用 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 年底如何獲取此信息，但您必須經常再次搜索並調整代碼，直到最終得到某些信息標准化，並在每個瀏覽器中實現，具有足夠廣泛的版本采用，您可以不再關心舊版本......