媒體查詢的IE問題

好的，這個腳本使用CSS媒體查詢檢查媒體類型。我的想法是，我創建了一個帶有媒體查詢的div（pre-DOM）和一個樣式元素，如果應用了樣式，那麼媒體查詢是真實的。這在Firefox 5，但不是在IE 9媒體查詢的IE問題

/** 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瀏覽器的控制檯，但它返回在IE 9「919 0」什麼是IE在這裏做什麼？我該如何解決？

下面是函數調用的一個例子：我已發現，寬度匹配屏幕寬度的100％匹配

經過一些測試： mediaQuery（「480像素）的屏幕和（最小寬度」）。。爲什麼不是媒體查詢在IE中工作，它在FF和Chrome中工作... 也許IE只是沒有處理CSS，然後我測試了JavaScript中的寬度？

來源

2011-08-02 matt

有趣的是，如果添加一個body標籤，而不是它的變化以903 0 – matt

一個div的，如果我將其更改爲高度和檢查outerHeight或財產的任何變化，以檢查高度（getClientRects，getBoundingClientRect，offsetHeight）它返回0。 – matt

我想通了。
IE只將css應用到body中的元素，爲了讓它使用css你必須將div放在僞造的body中（因爲真正的body尚未加載）。這裏是完成腳本：

/** 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-18 14:42:26 matt

媒體查詢的IE問題

回答

相關問題