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

admin管理员组

文章数量:1221479

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?

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?

• javascript
• dimension

Share Improve this question Follow edited May 19, 2016 at 3:40 Michael Gaskill 8,0421010 gold badges3939 silver badges4444 bronze badges asked Jun 29, 2012 at 14:34 FelixFelix 89.6k4444 gold badges151151 silver badges168168 bronze badges 2

• 2 I suggest checking this thread, if you haven't already done this. ) I don't think it's possible - at least, more-o-less precisely. – raina77ow Commented Jun 29, 2012 at 14:40
• I have no better idea than asking the user. – user669677 Commented May 5, 2014 at 11:49

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 12

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.

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

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

本文标签： javascriptHow to get screen39s physical size (ie in inches)Stack Overflow