媒体查询的 IE 问题答案

【问题标题】：IE problems with Media Queries媒体查询的 IE 问题
【发布时间】：2012-08-11 03:32:41
【问题描述】：

好的，此脚本使用 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 中起作用... 在我用javascript测试宽度之前，也许IE只是没有处理CSS？

【问题讨论】：

很有趣，如果你添加一个body标签而不是一个div它会变成903 0
如果我将其更改为高度并检查outerHeight 或任何属性变体以检查高度（getClientRects、getBoundingClientRect、offsetHeight）它返回0。

标签： javascript css internet-explorer-9 media-queries

【解决方案1】：

我想通了。
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 };
    }
}

【讨论】：