javascript - 从JS/CSS检测系统DPI/PPI？

我正在开发一种独特的应用程序，该应用程序需要根据显示它们的设备以特定的分辨率生成图像。因此，常规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测试)