Modernizr Pixel Ratio Media Query

Question

Been doing tests using modernizr and css media queries to see results on different devices. I added a test for -webkit-device-pixel-ratio:2 to detect when there's a retina display device, which will then execute a small jquery script to insert an image into the page.

However the script doesn't get executed, instead it calls the callback function of another test. Any ideas why this is? Been testing on ipad 2, iphone 4 and android emulator.

The pure css media query works like a charm, and inserts a message. The Modernizr mq test doesn't seem to work.

    /*
    * Retina Display Test
    */  
    {
        test: Modernizr.mq('-webkit-device-pixel-ratio:2'), 
            yep: 'js/retina.js',
            nope: 'js/regular.js',

    },//end retina test

https://dl.dropbox.com/u/85173358/devicewidth/orientation.html

Answer 1

Here is what I use :

Modernizr.addTest('highres', function() {
  // for opera
  var ratio = '2.99/2';
  // for webkit
  var num = '1.499';
  var mqs = [
      'only screen and (-o-min-device-pixel-ratio:' + ratio + ')',
      'only screen and (min--moz-device-pixel-ratio:' + num + ')',
      'only screen and (-webkit-min-device-pixel-ratio:' + num + ')',
      'only screen and (min-device-pixel-ratio:' + num + ')'
  ];
  var isHighRes = false;

  // loop through vendors, checking non-prefixed first
  for (var i = mqs.length - 1; i >= 0; i--) {
      isHighRes = Modernizr.mq( mqs[i] );
      // if found one, return early
      if ( isHighRes ) {
          return isHighRes;
      }
  }
  // not highres
  return isHighRes;
});

Then test Modernizr.highres anywhere in your JS.

Note : this code is not from me

Answer 2

I'd like to hear your answer too.

For your reference, this worked in my desktop mozilla:

var pr = Modernizr.mq('only all and (max-width: 2000px) and (min--moz-device-pixel-ratio: 1)');
alert(pr);  //returns true.

So, either it returns nothing, such as: "If a browser does not support media queries at all (eg. oldIE) the mq() will always return false."

Or perhaps you're not in webkit ratio 2. Some other possibilities:

(-webkit-min-device-pixel-ratio: 1.5)
(-o-min-device-pixel-ratio: 3/2)
(min--moz-device-pixel-ratio: 1.5)
(min-device-pixel-ratio: 1.5) 

I'd like to hear if any of these work for you, thanks! :)

Answer 3

According to w3.org documentation, to the above list of messages you may want to add:

'only screen and (min-resolution: 192dpi)'

and

'only screen and (min-resolution: 1.5dppx)'

Also I am not sure about

min--moz-device-pixel-ratio

in the mozilla documentation it is specified as

-moz-device-pixel-ratio

by the way this works for me (tested on an iPhone 4s).