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 :(.

Answer 3

The safest and easiest would be to tell the browser what size you want the image. CSS supports inch and metrics, so you could specify the image like any of these examples:

<img src="image.png" style="width:15cm;height:10cm;" alt="Centimeters" />
<img src="image.png" style="width:5.9in;height:3.9in;" alt="Inches" />
<img src="image.png" style="width:150mm;height:100mm;" alt="Millimeters" />

Answer 4

Displays today support 96px/inch or 72pixels/inch .

You can get the HTTP request User-Agent header

User-Agent: Mozilla/5.0 (Linux; X11)

this one will tell you the operating system and from here you can make a decision.

Answer 5

This may be very tough - even if you somehow manage to scale the rendered image based on dpi, how do you prevent the user from scaling the image in his browser directly?

Have you considered some rich interface technologies like flash or Silverlight? They may give you additional options.