18

The only way I found till now, is getting the offsetWidth, offsetHeight of a test div element with height and width of one inch: http://www.infobyip.com/detectmonitordpi.php

Is there a way to detect the screen DPI via JavaScript instead?

Thanks,

Atara.

5
  • This would depend on the display DPI being accurately calibrated in the first place.
    – Quentin
    Feb 15, 2012 at 11:06
  • That is a JavaScript function, isn't it? :)
    – AKX
    Feb 15, 2012 at 11:08
  • 1
    The approach you've described is the only sensible way I can think of of doing it in javascript. As for PHP, all it ultimately does is render text. It doesn't know, or care, about how that text is displayed by the client. Remember literally anything can connect to your web server and request a PHP page, some of them don't even have a graphical display at all (googlebot, curl sessions, line-mode browsers and screen readers, etc)
    – GordonM
    Feb 15, 2012 at 11:09
  • PHP is serverside, so it's not possible to do it that way. Like @GordonM said. Feb 27, 2012 at 13:18
  • 1
    Possible duplicate of Detecting the system DPI/PPI from JS/CSS?
    – Endless
    Mar 11, 2016 at 14:55

3 Answers 3

25

In webkit you can detect if your user has a so called "high dpi screen" by simply retrieving the value from:

window.devicePixelRatio

Normal dpi screens will return 1. The iPhone 4 will return 2, but numbers like 1.8 or 2.12 are also possible.

2
  • 2
    Even if this isn't standard (yet), it's now supported by Firefox (as of 18.0) and Opera and Opera Mobile—but still not IE. And of course some people don't have the latest browsers.
    – abarnert
    Jan 11, 2013 at 23:50
  • 2
    A "normal" screen's devicePixelRatio will return 1 only when the zoom level is set to 100%. So this is not an accurate way of detecting if the monitor in use is a high res (4k) screen or not.
    – Bill_VA
    May 24, 2018 at 13:07
12
<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
    dpi_x = document.getElementById('testdiv').offsetWidth;
    dpi_y = document.getElementById('testdiv').offsetHeight;
</script>

Then you can use JQuery to send dpi_x and dpi_y this to to your server

http://jsfiddle.net/sxfv3/

5
  • This is the code from the link I found. Isnt there a simple function to return this values?
    – Atara
    Feb 15, 2012 at 11:22
  • Yes, its from your link. I guess there is no defined javascript function to return you DPI. But this solution is also easy
    – Lixas
    Feb 15, 2012 at 11:53
  • I think this solution is the most trusted one. Oct 21, 2012 at 6:04
  • 7
    This seems to return 96dpi on my 1680x1050 15" high-res MacBook Pro, with the latest Safari and Firefox. And also on my 2880x1800 (or 1440x900 "points") 15" Retina MacBook Pro. And my 24" 1920x1200 external monitor.
    – abarnert
    Jan 11, 2013 at 23:42
  • 6
    As Pointy seems to be eager to point out in stackoverflow.com/questions/14242125/… , current browsers always return 96. I'm hopeful this will change soon, but as of now, this is how it is.
    – Ky -
    Jan 30, 2013 at 14:48
4

There is, so far, no standard and supported-everywhere solution.

window.devicePixelRatio, as suggested by laurens peeters, does work if you don't care about IE, or any browser from the ancient times, like early January 2013 (e.g., Firefox 17).

See Cross Browser Retina/High Resolution Media Queries (and various comments and links there) for how to get this information as of late 2012, but you'll have to keep searching again, and adjusting your code, every so often until something finally gets standardized, and implemented in every browser, with widespread-enough version adoption that you can stop caring about older versions…

3
  • 4
    dpr is NOT same as DPI.. dpi= how many pixels per inch. dpr = ratio of pixels to screen. which is 1 for most except high density devices. Aug 17, 2013 at 20:20
  • 1
    You can get dpi out of dpr like this: DPI = 96 * dpr. In browsers (and only in browsers), DPI of 96 is the dpr of 1. At some point someone decided (and the rest followed), that 96px is 1 physical inch in browsers (which is a good thing, as long, as you can access the dpr). In Windows 10 and 4K display it correctly returns dpr of 2.5. I would've thought, that correct dpr is also returned for FullHD screens (it really depends on the DPI setting in your OS, and not your screen resolution)
    – d-ph
    May 23, 2017 at 5:42
  • @d-ph on mobile devices we see the DPR is typically rounded down to the nearest whole number, thus resulting in quite inaccurate results. Also many phones have a DPR much lower than it should have, just so the CSS pixel width isn't less than 360. Apr 18, 2020 at 21:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.