我正在开发一种独特的应用程序，它需要根据显示图像的设备以特定分辨率生成图像。因此，在常规 Windows 浏览器 (96ppi)、iPhone (163ppi)、Android G1 (180ppi) 和其他设备上的输出是不同的。我想知道是否有办法自动检测到这一点。
我最初的研究似乎拒绝了。我看到的唯一建议是在 CSS 中创建一个宽度指定为“1in”的元素，然后检查其 offsetWidth（另请参阅如何通过 javascript 访问屏幕显示的 DPI 设置？）。有道理，但 iPhone 用这种技术对我撒谎，说它是 96ppi。
另一种方法可能是以英寸为单位获取显示器的尺寸，然后除以以像素为单位的宽度，但我也不知道该怎么做。
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
var devicePixelRatio = window.devicePixelRatio || 1;
dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;
console.log(dpi_x, dpi_y);
</script>从这里抓取http://www.infobyip.com/detectmonitordpi.php。适用于移动设备！（安卓 4.2.2 测试）
我想出了一种完全不需要 DOM 的方法……
DOM 可能很混乱，需要您在不知道width: x !important样式表中发生了什么的情况下将内容附加到正文中。您还必须等待 DOM 准备好使用...
/**
* Binary search for a max value without knowing the exact value, only that it can be under or over
* It dose not test every number but instead looks for 1,2,4,8,16,32,64,128,96,95 to figure out that
* you thought about #96 from 0-infinity
*
* @example findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)
* @author Jimmy Wärting
* @see {@link https://stackoverflow.com/a/35941703/1008999}
* @param {function} fn The function to run the test on (should return truthy or falsy values)
* @param {number} start=1 Where to start looking from
* @param {function} _ (private)
* @returns {number} Intenger
*/
function findFirstPositive (f,b=1,d=(e,g,c)=>g<e?-1:0<f(c=e+g>>>1)?c==e||0>=f(c-1)?c:d(e,c-1):d(c+1,g)) {
for (;0>=f(b);b<<=1);return d(b>>>1,b)|0
}
var dpi = findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)
console.log(dpi)有resolutionCSS 媒体查询——它允许您将 CSS 样式限制为特定分辨率：
但是，它仅受 Firefox 3.5 及更高版本、Opera 9 及更高版本和 IE 9 支持。其他浏览器根本不会应用您的分辨率特定样式（尽管我没有检查非桌面浏览器）。
这是对我有用的方法（但没有在手机上测试过）：
<body><div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div></body>
然后我放入.js： screenPPI = document.getElementById('ppitest').offsetWidth;
这让我得到了 96，这对应于我系统的 ppi。
@Endless 的回复很好，但根本不可读，这是一个类似的方法，具有固定的最小值/最大值（应该是好的）
var dpi = (function () {
for (var i = 56; i < 2000; i++) {
if (matchMedia("(max-resolution: " + i + "dpi)").matches === true) {
return i;
}
}
return i;
})();
matchMedia 现在得到了很好的支持，应该会产生很好的结果，请参阅http://caniuse.com/#feat=matchmedia
小心浏览器不会给你准确的屏幕 dpi，而只是一个近似值