现代像素比媒体查询

Question

我已经做了测试使用现代和css媒体查询，以查看在不同的设备上的结果。我添加了一个测试-webkit- device -pixel-ratio:2来检测是否有视网膜显示设备，然后它将执行一个小的jquery脚本将图像插入到页面中。

但是，脚本不会被执行，而是调用另一个测试的回调函数。你知道为什么会这样吗？我已经在iPad2，iPhone4和android模拟器上进行了测试。

纯css媒体查询就像一个护身符，并插入一条消息。现代mq测试似乎不起作用。

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

下面是我使用的代码：

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

然后在JS中的任何地方测试Modernizr.highres。

注意:这段代码不是我写的

Answer 2

我也想听听你的回答。

供您参考，这在我的桌面mozilla中有效：

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

因此，它要么什么也不返回，比如：“如果浏览器根本不支持媒体查询(例如oldIE)，那么mq()将总是返回false。”

或者你可能不在webkit比率2中。其他一些可能性：

(-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) 

我很想知道这些方法是否对您有效，谢谢！:)

Answer 3

根据w3.org documentation的说法，对于上面的消息列表，您可能想要添加：

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

和

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

另外，我也不确定

min--moz-device-pixel-ratio

在mozilla documentation中，它被指定为

-moz-device-pixel-ratio

顺便说一句，这对我来说很有效(在iPhone 4s上测试过)。