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媒體查詢

回答

相關問題