Modernizr 2.5.3 тестирование медиа-запросов разрывает страницу в IE и Opera - PullRequest
Новая
       28

Modernizr 2.5.3 тестирование медиа-запросов разрывает страницу в IE и Opera

5 голосов
/ 03 апреля 2012

У меня есть документ HTML5, который использует медиа-запросы. Чтобы обслуживать пользователей более старых браузеров, я просто пытался эмулировать поведение в JS и использовать modernizr 2.5.3 (файл, который я вчера получил из загрузки HTML5 Boilerplate), чтобы выполнить mq-testing .

Еще одна вещь, которую я хотел бы сделать, это немного изменить интерфейс, если клиент поддерживает сенсорные события, используя простой Modernizr.touch.

Я делаю это следующим образом: 

//$window is $(window)
if ($window.width() < 575 || Modernizr.touch){ 
    //change UI layout a little
}

if (Modernizr.touch){ 
    //enable tap-navigation for touch devices
}

if (!Modernizr.mq('only all and (min-width: 575px)')){ //fix non-media query browsers

    $window.resize(function(){

    if ($window.width() < 575){
        //add CSS
    } else {
        //remove CSS
    }).trigger('resize');

}

Это прекрасно работает в Webkit (для мобильных и настольных ПК) и Firefox, но когда я пытаюсь открыть страницу в Opera (11.6) или в Internet Explorer (7-9), ад проваливается. События будут запускаться случайное количество раз, анимации jQuery будут останавливаться на полпути, честно говоря, я понятия не имею, что может происходить (хотя никаких ошибок консоли). Когда я удаляю скрипт modernizr из заголовка моей страницы, он работает просто отлично (за исключением, конечно, функции обнаружения ...).

Я также использую html5shiv (я загружаю это после modernizr, но все еще в голове), как: 

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Я подозреваю, что это виновник в случае взлома IE, но, поскольку это не должно влиять на поведение Opera, я немного не в себе.

Я что-то не так делаю или это какая-то ошибка, и мне нужно искать другой способ обнаружения функции?

EDIT

Пока я пытался выяснить, что происходит, я обнаружил следующее: то, что кажется корнем всего зла, это просто тест медиа-запроса: Modernizr.mq('only all and (min-width: 575px)'). Как только это называется, все сходит с ума. Я могу записать это в консоль и получу правильный результат, хотя, кажется, что-то ломается каким-то странным образом. Кроме того, я могу разбить работающую страницу (которая еще не вызывала этого), вызвав ее из консоли.

РЕДАКТИРОВАТЬ № 2 :

При поиске альтернативного способа тестирования функций я обнаружил эту библиотеку в dev.opera, которая (вау!), Похоже, работает нормально в Opera. Тем не менее, он не работает в IE (Webkit и Firefox в порядке), так как жалуется на: 

style.innerText = '@media ' + str + ' { #'+id+' { display:none !important; } }';

Мех.

РЕДАКТИРОВАТЬ № 3 :

Итак, я только что перешел на модернизированную версию 2.0.6, и теперь все отлично работает во всех браузерах. Хотя я до сих пор не уверен, что это ошибка или я что-то не так делаю, поэтому я подожду некоторое время, прежде чем сам на это отвечу.

Ответы [ 3 ]

1 голос
/ 24 апреля 2012

Хорошо, я попробовал все, что мог, чтобы заставить это работать.Я позаботился о том, чтобы у меня был последний выпуск Modernizr, я изолировал все свои js и оставил только минимальный уровень на странице, но все равно ничего не работает.

В качестве последнего средства я просмотрел исходный код Modernizr.В методе mq другой проект цитируется matchMedia.Проект MatchMedia принадлежит одному из авторов Modernizr Полу Айришу.Фактически, Modernizr будет вызывать mediaMatch, если он уже существует на странице, вместо собственного теста Media Query.Поэтому я скачал matchMedia.js и добавил его в свой проект, и это решило мою проблему. 

   //From moderizr source, remarks are my notes.
    testMediaQuery = function( mq ) {

   //if matchMedia or msMatchMedia return the matchMedia result, else execute modernizr code
          var matchMedia = window.matchMedia || window.msMatchMedia; 
          if ( matchMedia ) {
            return matchMedia(mq).matches;
          }
    //if mediaMatch is not found the moderizr version of this method executes...

Вы можете получить matchMedia.js здесь, https://github.com/paulirish/matchMedia.js

Обновление: Я восстановил пользовательскую сборку 2.5.3, и она работает без matchMedia.js.

1 голос
/ 19 апреля 2012

У меня сегодня была похожая проблема с Opera Mobile 9.5. Вероятно, это вызвано использованием одного и того же div для нескольких тестов медиа-запросов. Код разработчика Opera использует случайные идентификаторы для тестирования медиазапросов:

id = ('x'+Math.random()).replace(/\./,'');

но рутинный модернизатор matchMedia polyfill использует то же самое. Возможно это не удалено в тех браузерах? Я пробовал что-то вроде этого:

min200 = ((Modernizr.mq('all and (min-device-width: 200px)')) ? "yes" : "no"); min400 = ((Modernizr.mq('all and (min-device-width: 400px)')) ? "yes" : "no"); ... min600 = ((Modernizr.mq('handheld')) ? "yes" : "no");

Если mq () станет true, остальное тоже будет true. Тем не менее, это может быть неправильно ...

Спасибо за ссылку на Opera!

0 голосов
/ 24 апреля 2012

У меня возникла та же проблема в IE 7 и 8. Поэтому я перешел и заново загрузил библиотеку со страницы github, и проблема, похоже, исправлена. Я надеюсь, что modernizr.com скоро обновится новым кодом, чтобы я мог загрузить пользовательскую сборку.

...