Question

好的，此脚本使用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 };
    }
}

这在FF 5和Chrome控制台中返回“5 1”，但在IE 9中返回“919 0”。这是什么IE在这里做的？我该如何解决？

以下是函数调用的示例： mediaQuery（'screen and（min-width：480px）'）。match

经过一些测试后，我发现宽度与屏幕宽度的100％相匹配。为什么媒体查询不能在IE中运行，它适用于FF和Chrome ... 也许IE在我在javascript中测试宽度之前没有处理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 };
    }
}

媒体查询的IE问题

1 个答案: