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

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