我正在研究一种独特的应用程序，它需要根据显示的设备生成特定分辨率的图像。因此，在常规Windows浏览器（96ppi），iPhone（163ppi），Android G1（180ppi）和其他设备上的输出是不同的。我想知道是否有办法自动检测到这一点。
我最初的研究似乎说不。我看到的唯一建议是在CSS中创建一个宽度指定为“1in”的元素，然后检查它的offsetWidth（另请参阅How to access screen display’s DPI settings via javascript?）。有道理，但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。适用于移动设备！ （android 4.2.2测试过）
我刚刚找到这个链接：http://dpi.lv/。基本上它是一个发现客户端设备分辨率，dpi和屏幕大小的webtool。
我访问了我的电脑和手机，它为我提供了正确的分辨率和DPI。它有一个github回购，所以你可以看到它是如何工作的。
你不能做别的吗？例如，如果您要生成要由相机识别的图像（即您运行程序，在相机上刷手机，发生魔术），您不能使用与尺寸无关的内容吗？
如果这是要在受控环境中部署的应用程序，您是否可以提供校准实用程序？ （你可以制作一些简单的东西，比如带有小尺子的印刷名片，在校准过程中使用它）。
生成已知DPI的列表：https://stackoverflow.com/a/6793227
检测确切的设备。使用类似的东西：
navigator.userAgent.toLowerCase();
例如，在检测移动时：
window.isMobile=/iphone|ipod|ipad|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase());
并且获利！
有resolution CSS媒体查询 - 它允许您将CSS样式限制为特定的分辨率：
但是，it’s only supported by Firefox 3.5 and above, Opera 9 and above, and IE 9。其他浏览器根本不会应用特定于分辨率的样式（尽管我没有检查过非桌面浏览器）。
我提出了一种根本不需要DOM的方法
DOM可能很乱，要求你在不知道样式表中使用width: x !important的内容的情况下将东西附加到身体上。您还必须等待DOM准备好使用...
// Binary search, (faster then loop)
// also don't test every possible value, since it tries low, mid, and high
// http://www.geeksforgeeks.org/find-the-point-where-a-function-becomes-negative/
function findFirstPositive(b, a, i, c) {
c=(d,e)=>e>=d?(a=d+(e-d)/2,0<b(a)&&(a==d||0>=b(a-1))?a:0>=b(a)?c(a+1,e):c(d,a-1)):-1
for (i = 1; 0 >= b(i);) i *= 2
return c(i / 2, i)|0
}
var dpi = findFirstPositive(x => matchMedia(`(max-resolution: ${x}dpi)`).matches)
console.log(dpi)这对我有用（但没有在手机上测试）：
<body><div id="ppitest" style="width:1in;visible:hidden;padding:0px"></div></body>
然后我放入.js：screenPPI = document.getElementById('ppitest').offsetWidth;
这让我96，这对应于我的系统的ppi。
我还需要在不同的屏幕dpi下以相同的大小显示相同的图像，但仅适用于Windows IE。我用了：
<img src="image.jpg" style="
height:expression(scale(438, 192));
width:expression(scale(270, 192))" />
function scale(x, dpi) {
// dpi is for orignal dimensions of the image
return x * screen.deviceXDPI/dpi;
}
在这种情况下，原始图像宽度/高度为270和438，图像在192dpi屏幕上显影。 screen.deviceXDPI未在Chrome中定义，并且需要更新缩放功能以支持IE以外的浏览器
来自@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但只是近似值
function getPPI(){
// create an empty element
var div = document.createElement("div");
// give it an absolute size of one inch
div.style.width="1in";
// append it to the body
var body = document.getElementsByTagName("body")[0];
body.appendChild(div);
// read the computed width
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
// remove it again
body.removeChild(div);
// and return the value
return parseFloat(ppi);
}
（来自VodaFone）
我认为你最好的方法是将“嗅探器”图像的建议与设备的已知DPI矩阵结合起来（通过用户代理和其他方法）。它不会是准确的，维护会很痛苦，但是如果不了解您正在尝试制作的应用程序，那么这是我能提供的最佳建议。
根据定义，DPI与显示器的物理尺寸相关联。因此，如果不完全了解背后的硬件，您将无法拥有真正的DPI。
现代操作系统同意一个共同的价值，以获得兼容的显示：96 dpi。这是一种耻辱但这是事实。
您必须依靠嗅探才能猜出计算分辨率所需的实际屏幕尺寸（DPI = PixelSize / ScreenSize）。