CODEWITHSUNDEEP
javascriptdimension
Felix
Felix

Reputation: 89576

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

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?

Upvotes: 18

Views: 14529

Answers (2)

rickster
rickster

Reputation: 126127

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.

Upvotes: 12

t3hn00b
t3hn00b

Reputation: 912

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

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

Upvotes: 0

Related Questions