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.

John
  • 1
  • 13
  • 98
  • 177
Atara
  • 3,523
  • 6
  • 37
  • 56
  • This would depend on the display DPI being accurately calibrated in the first place. – Quentin Feb 15 '12 at 11:06
  • That _is_ a JavaScript function, isn't it? :) – AKX Feb 15 '12 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 '12 at 11:09
  • PHP is serverside, so it's not possible to do it that way. Like @GordonM said. – OptimusCrime Feb 27 '12 at 13:18
  • 1
    Possible duplicate of [Detecting the system DPI/PPI from JS/CSS?](http://stackoverflow.com/questions/279749/detecting-the-system-dpi-ppi-from-js-css) – Endless Mar 11 '16 at 14:55

3 Answers3

24

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.

LinusGeffarth
  • 27,197
  • 29
  • 120
  • 174
laurens peeters
  • 545
  • 1
  • 3
  • 13
  • 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 '13 at 23:50
  • 1
    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 '18 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/

Darwin
  • 4,686
  • 2
  • 30
  • 22
Lixas
  • 6,938
  • 2
  • 25
  • 42
  • This is the code from the link I found. Isnt there a simple function to return this values? – Atara Feb 15 '12 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 '12 at 11:53
  • I think this solution is the most trusted one. – Saeed Neamati Oct 21 '12 at 06: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 '13 at 23:42
  • 6
    As Pointy seems to be eager to point out in http://stackoverflow.com/questions/14242125/determining-the-width-of-a-webpage-in-inches , current browsers always return 96. I'm hopeful this will change soon, but as of now, this is how it is. – Ky - Jan 30 '13 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…

abarnert
  • 354,177
  • 51
  • 601
  • 671
  • 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. – Muhammad Umer Aug 17 '13 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 '17 at 05: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. – David Callanan Apr 18 '20 at 21:25