How to detect the screen DPI using JavaScript

Question

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.

This would depend on the display DPI being accurately calibrated in the first place. — Quentin
– Quentin, Commented Feb 15, 2012 at 11:06
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
– GordonM, Commented Feb 15, 2012 at 11:09
PHP is serverside, so it's not possible to do it that way. Like @GordonM said. — OptimusCrime
– OptimusCrime, Commented Feb 27, 2012 at 13:18
Possible duplicate of Detecting the system DPI/PPI from JS/CSS? — Endless
– Endless, Commented Mar 11, 2016 at 14:55

LinusG. · Accepted Answer · 2021-02-26 11:35:44Z

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.

edited Feb 26, 2021 at 11:35

LinusG.

29.4k32 gold badges124 silver badges183 bronze badges

answered Feb 27, 2012 at 13:44

laurens peeters

5552 gold badges4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abarnert Over a year ago

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.

Bill_VA Over a year ago

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.

Björn Blomqvist · Accepted Answer · 2013-01-08 11:25:14Z

13

<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/

edited Jan 8, 2013 at 11:25

Björn Blomqvist

4,8062 gold badges33 silver badges23 bronze badges

answered Feb 15, 2012 at 11:16

Lixas

7,3982 gold badges27 silver badges42 bronze badges

5 Comments

Atara Over a year ago

This is the code from the link I found. Isnt there a simple function to return this values?

Lixas Over a year ago

Yes, its from your link. I guess there is no defined javascript function to return you DPI. But this solution is also easy

Saeed Neamati Over a year ago

I think this solution is the most trusted one.

abarnert Over a year ago

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.

Ky - Over a year ago

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.

abarnert · Accepted Answer · 2013-01-11 23:57:33Z

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…

answered Jan 11, 2013 at 23:57

abarnert

368k54 gold badges626 silver badges691 bronze badges

3 Comments

Muhammad Umer Over a year ago

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.

d-ph Over a year ago

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)

David Callanan Over a year ago

@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.

Collectives™ on Stack Overflow

How to detect the screen DPI using JavaScript

3 Answers 3

2 Comments

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related