从JS / CSS检测系统DPI / PPI？ [英] Detecting the system DPI/PPI from JS/CSS?
问题描述
我正在开发一种独特的应用程序，需要根据显示的设备生成特定分辨率的图像。因此，在常规Windows浏览器（96ppi），iPhone（163ppi），Android G1（180ppi）和其他设备上的输出不同。我想知道是否有自动检测这种方法。
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.
我最初的研究似乎说不。我见过的唯一建议是在CSS中创建一个宽度为1in的元素，然后检查其offsetWidth（另请参见如何通过javascript访问屏幕显示的DPI设置？）。有意义，但是iPhone是用这种技术在说谎的，说它是96ppi。
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.
推荐答案
有分辨率 CSS媒体查询 - 它允许您将CSS样式限制为特定的分辨率：
There is the resolution CSS media query — it allows you to limit CSS styles to specific resolutions:
- http://www.w3.org/TR/css3-mediaqueries/#resolution
但是，仅支持Firefox 3.5及更高版本，Opera 9及更高版本，以及IE 9 。其他浏览器将不会应用您的特定于分辨率的样式（虽然我没有选中非桌面浏览器）。
However, it’s only supported by Firefox 3.5 and above, Opera 9 and above, and IE 9. Other browsers won’t apply your resolution-specific styles at all (although I haven’t checked non-desktop browsers).
这篇关于从JS / CSS检测系统DPI / PPI？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
