Detecting a retina display iPad with javascript

Question

I'm having a problem detecting a retina iPad (and similar devices) using just screen.availWidth and window.devicePixelRatio. The problem is that iPhones and iPads give the number of dips for screen.availWidth whereas android devices seem to report the number of physical pixels so I can't reliably do screen.availWidth / window.devicePixelRatio to calculate if the screen is of a tablet size.

Is there some other DOM property I can use to help me?

edit - To sum up in a way which hopefully makes clear that the question isn't a duplicate

How can I tell if screen.availWidth reports a value that has already been adjusted to take account of window.devicePixelRatio

possible duplicate of [How to detect if iPhone has retina display or not?](http://stackoverflow.com/questions/11016339/how-to-detect-if-iphone-has-retina-display-or-not) — Raptor, Mar 11 '13 at 09:52
@ShivanRaptor not exactly - `devicePixelRatio` reliably tells you whether it's a retina display, but doesn't necessarily tell you how many dips you have to work with — wheresrhys, Mar 11 '13 at 09:53
You can combine with detecting User Agent, which by default browser is telling you the device model — Raptor, Mar 11 '13 at 09:55

kidwon · Answer 1 · 2013-03-11T10:38:12.650

4

That should help

var retina = (window.retina || window.devicePixelRatio > 1);

UPDATE

Retina.isRetina = function(){
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                      (min--moz-device-pixel-ratio: 1.5),\
                      (-o-min-device-pixel-ratio: 3/2),\
                      (min-resolution: 1.5dppx)";

    if (root.devicePixelRatio > 1)
      return true;

    if (root.matchMedia && root.matchMedia(mediaQuery).matches)
      return true;

    return false;
};

edited Mar 11 '13 at 10:38

answered Mar 11 '13 at 09:55

kidwon

4,448
5
28
45

It's not detecting that there's a retina display that's the problem, it's detecting that there is a retina display of a certain size or above – wheresrhys Mar 11 '13 at 10:05
1

Pardon me but what is retina display it's higher pixel density display. So if the ratio is higher than 1 what it means "if it looks like a duck, quacks like a duck and walks like a duck - then it is probably a duck" Check my update straight from retinajs detection – kidwon Mar 11 '13 at 10:37
The problem isn't detecting if the display is retina it's knowing if the device adjusts screen.availWidth itself or if you need to do it yourself. – wheresrhys Mar 11 '13 at 11:28

wheresrhys · Accepted Answer · 2013-12-05T11:22:42.580

I haven't tested this, but here's an approach I think might work. I'll do a jsbin for it when I get time.

Because all devices (to the best of my knowledge) adjust for devicePixelRatio before passing the value to CSS media queries we can (in slightly pseudo code)

measure window.devicePixelRatio and screen.availWidth

Write a style tag to the head which includes a media query something like the following

#my-test-el {
  display: none;
  visibility: visible;
}

@media screen and (min-device-width:screen.availWidth) {
  #my-test-el {
 visibility: hidden;
  }
}

Append <div id="my-test-el"> to the page
Read off the style.visibility attribute. If it equals hidden then the css value is the same value as screen.availWidth => screen.availWidth has been preadjusted for dpr.

edit It works! http://jsbin.com/IzEYuCI/3/edit. I'll put together a modernizr plugin too

edit And here's the pull request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful

For everyone reading this, the solution falsely identifies zoomed in browsers as highDPI/retina and does not identify a retina which is zoomed out equal or more than the "retina scale". — Fredrik C, Apr 26 '17 at 07:34

score 0 · Answer 3 · answered Mar 11 '13 at 09:57

0

This Modernizr plugin may help : Modernizr Retina : HiDPI Test

Note: Requires Modernizr's Media Queries feature

answered Mar 11 '13 at 09:57

Raptor

53,206
45
230
366

Reports true if the user have zoomed in more than 30% on a non-retina display. – Fredrik C Apr 25 '17 at 12:30
the utility has not been updated for few years. You might need to contact the developer for help. – Raptor Apr 26 '17 at 03:42
Yes, I am aware of that. This was just a comment for others reading this, to know the limitations. I have not found any way to do a proper detection but the plugin could be improved to make a better guess. – Fredrik C Apr 26 '17 at 07:29

Detecting a retina display iPad with javascript

3 Answers3

Linked