Modernizr Pixel Ratio媒体查询

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

但是脚本没有得到执行，而是调用了另一个测试的回调函数。任何想法，为什么这是？已经在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

来源

2012-07-10 Allan Watson

我想听听你的答案了。

供您参考，这个曾在我的桌面上的Mozilla：

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

所以，要么返回任何内容，如： “如果浏览器不可言（如过时的歌曲）支持媒体查询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-08 12:11:06

下面是我用：

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-08 14:13:23

据w3.org documentation，对消息的上述列表中，您可能需要添加：

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

和

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

而且我不太确定

min--moz-device-pixel-ratio

在

它是由这对我的作品的方式（在iPhone 4S测试）指定为

-moz-device-pixel-ratio

。

来源

2013-04-18 09:34:26

Modernizr Pixel Ratio媒体查询

回答

相关问题