How can I find out a web page viewers pixels per inch?

Question

Can anyone think of a way I can discover a users pixels per inch? I want to ensure that a image displays in a web browser exactly the size I need it to, so using a combination of resolution (which I can get from the user agent) and pixels per inch I could do this.

However, I'm not sure if there is any way to discover a users pixels per inch, ideally using JavaScript or some other non-invasive method.

Any suggestions?

Thanks,

CJ

Answer 1

You could use the following javascript function to get the DPI.

<script type="text/javascript">
   var dpi = {
      v: 0,
      get: function (noCache) {
         if (noCache || dpi.v == 0) {
            e = document.body.appendChild(document.createElement('DIV'));
            e.style.width = '1in';
            e.style.padding = '0';
            dpi.v = e.offsetWidth;
            e.parentNode.removeChild(e);
         }
         return dpi.v;
      }
   }

    alert(dpi.get(true));  // recalculate
    alert(dpi.get(false)); // use cached value
</script>

However, I think it will always return 96 on windows machines.

As far as I know, there is no way for the operating system to determine the actual physical dimensions of the viewport. So, it might very well be that it is actually impossible for software to know the real-life DPI.

However, professionals is certain branches make sure that the on screen DPI matches the real-life DPI. In those case the above javascript would probably be sufficient.

Note:
Tested the above code in Opera 9, IE6 & 7 and Firefox 3.6 on WinXP and Win2k.

Update:
Added the noCache param. But I doubt it will have any effect. I tested it with zoom in FireFox and Opera on the above mentioned windows versions and they keep quoting the DPI as '96', regardless of the amount of zoom. Would be interesting to see what mobile devices make of this.

Answer 2

You could do as the drawing packages of old did, and display a stretchable ruler. Have your users drag the virtual ruler until it matches a physical ruler they've put against the screen.

Not a serious suggestion for production use, but probably the only way to actually get the right answer :(.