Modernizr 像素比媒体查询答案

【问题标题】：Modernizr Pixel Ratio Media QueryModernizr 像素比媒体查询
【发布时间】：2012-07-09 20:28:40
【问题描述】：

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

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

纯 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

【问题讨论】：

标签： media-queries modernizr

【解决方案1】：

我也想听听你的回答。

供您参考，这在我的桌面 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)

我想知道这些是否对您有用，谢谢！ :)

【讨论】：

【解决方案2】：

这是我使用的：

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。

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

【讨论】：

【解决方案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 上测试）。

【讨论】：