从 JS/CSS 检测系统 DPI/PPI? [英] Detecting the system DPI/PPI from JS/CSS?

问题描述

我正在开发一种独特的应用程序，它需要根据显示图像的设备以特定分辨率生成图像.因此，在常规 Windows 浏览器 (96ppi)、iPhone (163ppi)、Android G1 (180ppi) 和其他设备上的输出是不同的.我想知道是否有办法自动检测到这一点.

我最初的研究似乎拒绝了.我看到的唯一建议是在 CSS 中创建一个宽度指定为1in"的元素，然后检查其 offsetWidth(另请参见 如何通过 javascript 访问屏幕显示的 DPI 设置?).有道理，但 iPhone 用这种技术对我撒谎，说它是 96ppi.

另一种方法可能是获取以英寸为单位的显示器尺寸，然后除以以像素为单位的宽度，但我也不知道该怎么做.

解决方案

从这里抓取 http://www.infobyip.com/detectmonitordpi.php.适用于移动设备！(安卓 4.2.2 测试)

I'm working on a kind of unique app which needs to generate images at specific resolutions according to the device they are displayed on. So the output is different on a regular Windows browser (96ppi), iPhone (163ppi), Android G1 (180ppi), and other devices. I'm wondering if there's a way to detect this automatically.

My initial research seems to say no. The only suggestion I've seen is to make an element whose width is specified as "1in" in CSS, then check its offsetWidth (see also How to access screen display’s DPI settings via javascript?). Makes sense, but iPhone is lying to me with that technique, saying it's 96ppi.

Another approach might be to get the dimensions of the display in inches and then divide by the width in pixels, but I'm not sure how to do that either.

解决方案

<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>

grabbed from here http://www.infobyip.com/detectmonitordpi.php. Works on mobile devices! (android 4.2.2 tested)

这篇关于从 JS/CSS 检测系统 DPI/PPI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！