Question

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

但是脚本没有被执行，而是调用另一个测试的回调函数。任何想法为什么会这样？正在测试ipad 2，iphone 4和android模拟器。

纯css媒体查询的工作方式类似于魅力，并插入消息。 Modernizr 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

<{3>}中的

指定为

-moz-device-pixel-ratio

这对我有用（在iPhone 4s上测试）。

Modernizr像素比率媒体查询

3 个答案: