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

Answer 1

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)

1. measure window.devicePixelRatio and screen.availWidth

2. 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;
     }
   }
   

3. Append <div id="my-test-el"> to the page

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

Answer 2

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;
};

Answer 3

This Modernizr plugin may help : Modernizr Retina : HiDPI Test

Note: Requires Modernizr's Media Queries feature