0

一直在使用 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

4

3 回答 3

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。

注意：此代码不是我的

于 2013-01-08T14:13:23.690 回答
0

根据w3.org 文档，您可能希望在上述消息列表中添加：

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

和

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

我也不确定

min--moz-device-pixel-ratio

在Mozilla 文档中它被指定为

-moz-device-pixel-ratio

顺便说一句，这对我有用（在 iPhone 4s 上测试）。

于 2013-04-18T09:34:26.687 回答
0

我也想听听你的回答。

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

我想听听这些对你有用吗，谢谢！:)

于 2012-08-08T12:11:06.727 回答