IE проблемы с Media Queries - PullRequest
Новая
       13

IE проблемы с Media Queries

1 голос
/ 02 августа 2011

ОК, этот скрипт проверяет тип мультимедиа с помощью медиа-запросов css. Идея состоит в том, что я создаю div (pre-DOM) и элемент стиля с медиа-запросами, и если стиль применяется, то медиа-запрос был истинным. Это работает в Firefox 5, но не в IE 9. 

/** Detect Browser Media **/
if(!window.mediaQuery){
    window.mediaQuery = function(query){
    var boolean = 0;

    style = document.createElement('style');
    style.media = query;
    style.innerHTML = '#mediaQuery{width:5px;}';
    document.head.appendChild(style);

    div = document.createElement('div');
    div.id = 'mediaQuery';
    document.documentElement.appendChild(div);

    if(div.offsetWidth == 5){boolean = 1;}
    console.log(div.offsetWidth," ",boolean);

    return { match:boolean };
    }
}

Возвращает «5 1» в FF 5 и в консоли Chrome, но возвращает «919 0» в IE 9. Что здесь делает IE? Как я могу обойти?

Вот пример вызова функции: mediaQuery ('screen and (min-width: 480px)'). match

После некоторого тестирования я обнаружил, что ширина соответствует 100% ширины экрана. Почему медиа-запрос не работает в IE, он работает в FF и Chrome ... Может быть, IE просто не обрабатывает CSS, прежде чем я проверю ширину в javascript?

1 Ответ

0 голосов
/ 18 августа 2011

Я понял это.
IE применяет css только к элементам в теле, чтобы заставить его использовать css, вы должны поместить div в поддельное тело (потому что реальное тело еще не загружено). Вот готовый сценарий: 

/** Detect Browser Media **/
if(!window.mediaQuery){
    window.mediaQuery = function(query){
    var boolean = 0;

    var style = document.createElement('style');
    style.type="text/css";
    style.media = query;
    if(style.styleSheet){style.styleSheet.cssText='#mediaQuery{width:30px;}';}else{
        var MyCssText=document.createTextNode("#mediaQuery{width:30px;}");
        style.appendChild(MyCssText);
    }

    document.head.appendChild(style);

    bod = document.createElement('body');
    bod.id="fakeBody";
    div = document.createElement('div');
    div.id = 'mediaQuery';
    document.documentElement.appendChild(bod);
    bod.appendChild(div);

    if(div.offsetWidth == 30){boolean = 1;}
    console.log(div.offsetWidth," ",boolean);

    return { match:boolean };
    }
}
...