Modernizr Соотношение пикселей Media Query

Делал тесты с использованием медиа-запросов 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


media-queries modernizr
person Allan Watson    schedule 10.07.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вот что я использую:

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;
});

Затем протестируйте Modernizr.highres в любом месте вашего JS.

Примечание: этот код не от меня

person Rémy DAVID    schedule 08.01.2013

arrow_upward
0
arrow_downward

Я тоже хочу услышать твой ответ.

Для справки, это работало в моей десктопной мозилле:

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 ratio 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)

Я хотел бы услышать, работает ли что-нибудь из этого для вас, спасибо! :)

person Jennifer Michelle    schedule 08.08.2012

arrow_upward
0
arrow_downward

Согласно документация 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).

person George Vlachos    schedule 18.04.2013