Programmatically determine DPI via the browser?

Question

Hi all. I would like to programmaticaly determine the DPI of a user's display in order to show a web page at a precise number of units (centimeters/inches). I know it a weird request: it's for a visualization research project and it's kind of a control. We currently do it by having the user place a credit card to the screen and match a resizable div (via Mootools) to the real credit card, and voila we can get the DPI and display the page correctly.

Can anyone think of a programmatic way to do this?

Answer 1

You can't. DPI is a function of the pixel resolution of the screen and the physical dimensions of the display. The latter is not available in any browser interface I am aware of.

Answer 2

If you're doing this in javascript/mootools, CSS units are your friend. You can specify sizes in inches or centimeters, or even points (1/72 of an inch). If you absolutely need DPI for whatever reason even though you can specify sizes in those units, simply size the "resizable" div you are using to a known size and calculate from the translated pixel size.

Edit:

Unfortunately, the CSS units of points, cm, and in are not physically correct. They are only relatively correct. This was the first thing I tried until I realized it wasn't working and checked the CSS spec.. to my dismay. – Brandon Pelfrey

That's a good point; browsers tend to fake it by assuming a default DPI (I think 72 or 96) and going with that.

Well, if you need precision sizing like you're asking for, you're out of luck. You'll never be able to get it without being able to read both the current resolution of the monitor the browser is on and the "viewable screen area" of that monitor. Ain't no way you're gonna get that via Javascript.

I suggest that you make the default assumption that browsers do and size according to the CSS units. You can then allow your users to "adjust the sizing" using the method you mentioned, but only if it's necessary. Do this with on a separate page with the DPI calculation stored as part of the users session or as a cookie.

Alternatively, once Microsoft fixes this bug, you could use Silverlight's "device independent units" for accurate scaling.

Answer 3

I think that you won't get precise results - for example you can resize the picture using the monitor. I'd rather stick with the user-driven method, although you can f.e. detect screen resolution for a first estimate.

Answer 4

It's not possible from a browser without code running on the target computer. If you could install something on the target computer you might be able to determine enough about the monitor to calculate this.

Answer 5

DPI is a lie. It doesn't have anything to do with dots per inch, at least not in this context.

You can have two monitors that are different sizes and yet they can have the same resolution and the same DPI.

There is no software solution. You'd have to calibrate this on your own by displaying a grid on the screen and ask the user to place a ruler next to it to see where things align.

Answer 6

Someone is abel to do it but have no idea how....

http://www.infobyip.com/detectdisplaysize.php http://www.infobyip.com/detectmonitordpi.php

Answer 7

http://www.infobyip.com/detectdisplaysize.php returns the wrong values if you use an odd resolution