title: Detecting the system DPI/PPI from JS/CSS?
body: <p>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.</p>
  
  <p>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 <a href="https://stackoverflow.com/q/476815/698168">How to access screen display’s DPI settings via javascript?</a>). Makes sense, but iPhone is lying to me with that technique, saying it's 96ppi.</p>
  
  <p>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.</p>