Detecting the system DPI/PPI from JS/CSS?

Question

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.

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

Answer 1

I think your best approach is to combine the suggestion of the "sniffer" image with a matrix of known DPIs for devices (via user agent and other methods). It won't be exact and will be a pain to maintain, but without knowing more about the app you're trying to make that's the best suggestion I can offer.

Answer 2

Yeah, I've actually gone in and done some user agent sniffing since posting, but as you note, that's kind of a pain, especially when dealing with the array of Windows Mobile devices. The WiMo devices do give you a little of info about the display (dimensions in pixels, bit depth, smartphone vs ppc), but not resolution.

Answer 3

DPI is by definition tied to the physical size of the display. So you won't be able to have the real DPI without knowing exactly the hardware behind.

Modern OSes agreed on a common value in order to have compatible displays: 96 dpi. That's a shame but that's a fact.

You will have to rely on sniffing in order to be able to guess the real screen size needed to compute the resolution (DPI = PixelSize / ScreenSize).

Answer 4

Can't you do anything else? For instance, if you are generating an image to be recognized by a camera (i.e. you run your program, swipe your cellphone across a camera, magic happens), can't you use something size-independent?

If this is an application to be deployed in controlled environments, can you provide a calibration utility? (you could make something simple like print business cards with a small ruler in it, use it during the calibration process).

Answer 5

You can find the actual width of the monitor using the windows library function. GetDeviceCaps

int widthmm = GetDeviceCaps(deviceContext, HORZSIZE);

The function returns the size in mm which can easily be converted to inches.

for eg: if your current resolution is 1280x1024

DPI = 1280/ (widthmm/25.4)

Answer 6

I saw a suggestion that made sens to me, however I didn't test it.

Create a <div> element of a given dimension in pixels and then get its dimension in inches.

Worth a try, I guess.

Having a database of user agents / resolutions seems hypothetical to me: Some OS like Vista and XP allow the user to change the DPI being used for display, meaning that a 1900x1200 screen can be seen at 96dpi or 120dpi...

Answer 7

I also needed to display the same image at the same size at different screen dpi but only for Windows IE. I used:

<img src="image.jpg" style="
    height:expression(scale(438, 192)); 
    width:expression(scale(270, 192))" />

function scale(x, dpi) {

    // dpi is for orignal dimensions of the image
    return x * screen.deviceXDPI/dpi;
}

In this case the original image width/height are 270 and 438 and the image was developed on 192dpi screen. screen.deviceXDPI is not defined in Chrome and the scale function would need to be updated to support browsers other than IE