How to get screen's physical size (i.e. in inches)?

Question

I'm trying to figure out how to get the physical dimensions of a device's screen via Javascript. So far, my conclusion is that it's currently impossible, but I hope someone can prove me wrong :).

So far I have tried to get this information by finding the device's DPI, but it seems there is no way to get the correct value here, as all devices I have tested (some HDPI & XHDPI Android devices, an iPhone4S, an iPad 2 and an iPad 3) report 96DPI.

The first method of obtaining the DPI I tried is one you can find everywhere on the internet: create a div with a CSS width of 1in, get its clientWidth or offsetWidth and there's your DPI. Doesn't work, all devices report 96.

The second method was using the resolution media query, something along the lines of:

for (var i=90; i < 400; i++) {
    if (matchMedia('(resolution: ' + i + 'dpi)').matches) {
       return i;
    }
}

I thought that was a smart solution, but unfortunately that returns 96 as well.

Is there anything left that I can try?

Answer 1

96 "DPI" is a web standard that has little to do with reality. The inches it measures are best considered "logical" inches, which correspond to font metrics and CSS measurements (which can include points and inches). A "point" in typography is defined to be 1/72 inch, but screens stopped being consistently 72 DPI ages ago. Thus, all a CSS point really means now is that a 96 point font is 72 pixels tall. (And that's logical pixels, since the issue is now further conflated by hi-DPI screens.)

Anyhow, most native operating systems don't know a thing about their true physical screen size, so they don't even have information about such that they could expose to web apps via a browser. What you're asking isn't possible.

Answer 2

Take a look at this post. It's done with:

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">