17

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?

Michael Gaskill
  • 7,913
  • 10
  • 38
  • 43
Felix
  • 88,392
  • 43
  • 149
  • 167
  • 2
    I suggest checking [this thread](http://stackoverflow.com/questions/6831115/is-it-possible-to-get-a-users-physical-screen-size-without-the-use-of-a-physical), if you haven't already done this. ) I don't think it's possible - at least, more-o-less precisely. – raina77ow Jun 29 '12 at 14:40
  • I have no better idea than asking the user. –  May 05 '14 at 11:49

2 Answers2

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.

rickster
  • 124,678
  • 26
  • 272
  • 326
  • I'm wondering, if most OSes don't know about the physical screen size, how is it that an application like MS Word is able to accurately display the page size when zoomed to 100%? Also other applications like Photoshop would almost certainly have to know the screen DPI. – Carvellis Mar 12 '14 at 08:44
  • 3
    Of course all modern Operating Systems are well aware about the physical size of the output device. Even old and dusted Windows-3.1 at least provided the necessary fields in its data structures to represent it (and it of course get used with e.g. printers). And since the introduction of DDC in display connections, computer displays report their physical screen size, which together with pixel density translate into a physical resolution. Of course if software really uses that information is a different story. But nevertheless the information has been available in all major OSs for a long time. – datenwolf Apr 06 '14 at 11:52
  • 1
    Perhaps that info has been available *to* operating systems for some hardware. But few, if any, operating systems make it available to applications, and fewer still apps have ever made use of it. (And no web browser exposes this info to JavaScript.) – rickster Apr 06 '14 at 23:49
  • The "100%" view setting in apps like Word and Photoshop is based on a hard-coded pixels-per-"inch" value. Try for yourself: make something in one if these apps, print it, and hold the printed page up to your screen with the view at 100%. The sizes probably won't match. (Most apps assume 72px/inch, and most displays have been denser than that for a long time.) Even if it does, it won't once you change your screen's resolution or open the app on a different machine/display with a different screen size and the same resolution. – rickster Apr 06 '14 at 23:53
  • 1
    @rickster It's 2019. It's high time that this info *is* made available to the browser. – Michael May 07 '19 at 03:01
0

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

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
t3hn00b
  • 904
  • 5
  • 13
  • 1
    I believe that is setting the DPI, not retrieving it. – Alex W Jun 29 '12 at 14:43
  • 1
    I was hoping that, with this tag added, the device would report the correct DPI using one of the methods described in my question. That unfortunately doesn't happen, though, but thanks for the tip. – Felix Jul 06 '12 at 13:47