メディアクエリーに関するIEの問題

Question

OK、このスクリプトは、cssメディアクエリーを使用してメディアタイプをチェックします。アイデアは、私がdiv（プレ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 }; 
    } 
} 

にこれはFF 5でとChromeのコンソールで「5 1」を返しますが、それはIEがここでやっている何をIE 9で「919 0」を返していませんか？どうすれば回避できますか？ mediaQuery（「スクリーンと（最小幅：480PX）」）ここ

は、関数呼び出しの一例である。私は幅が画面幅の100％一致することを発見したいくつかのテスト後

と一致します。 IEでメディアクエリが動作しないのはなぜですか？FFとChromeで動作します... javascriptの幅をテストする前にIEがCSSを処理していないことがありますか？

Answer 1

私はこれを理解しました。
IEは、CSSを使用するために、実際のボディがまだロードされていないため、偽のボディ内にdivを配置する必要があるため、ボディの要素にのみCSSを適用します。ここでは、完成したスクリプトは次のとおりです。

、十分に興味深い

/** 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 }; 
    } 
}