1

OK、このスクリプトは css メディア クエリを使用してメディア タイプをチェックします。アイデアは、メディア クエリを使用して div (pre-DOM) とスタイル要素を作成し、スタイルが適用されている場合、メディア クエリは true であるということです。これは 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 };
    }
}

これは FF 5 と Chrome コンソールでは "5 1" を返しますが、IE 9 では "919 0" を返します。IE はここで何をしているのですか? どうすれば回避できますか?

関数呼び出しの例を次に示します: mediaQuery('screen and (min-width: 480px)').match

いくつかのテストの後、幅が画面幅の 100% に一致することがわかりました。メディア クエリが IE で機能しないのはなぜですか?

4

1 に答える 1

0

私はこれを理解しました。
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 };
    }
}
于 2011-08-18T14:42:26.293 に答える