0

さまざまなデバイスで結果を確認するために、modernizr と css メディア クエリを使用してテストを行っています。-webkit-device-pixel-ratio:2 のテストを追加して、Retina ディスプレイ デバイスがあることを検出し、小さな 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

私もあなたの答えを聞きたいです。

参考までに、これは私のデスクトップ 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 に答える