1

好的，这个脚本使用 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 9 中返回“919 0”。IE 在这里做什么？我该如何解决？

这是函数调用的示例： mediaQuery('screen and (min-width: 480px)').match

经过一些测试，我发现宽度与屏幕宽度的 100% 匹配。为什么媒体查询在 IE 中不起作用，它在 FF 和 Chrome 中起作用……也许 IE 只是在我在 javascript 中测试宽度之前没有处理 CSS？

4

1 回答 1

0

我想通了。
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-18T14:42:26.293 回答