IE 媒体查询问题

发布于 2024-11-27 13:34:03 字数 924 浏览 1 评论 0原文

好的，该脚本使用 CSS 媒体查询检查媒体类型。我的想法是，我创建一个 div（前 DOM）和一个带有媒体查询的样式元素，如果应用了样式，则媒体查询为 true。这在 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？

原文

OK, this script checks the media type using css media queries. The idea is that I create a div (pre-DOM) and a style element with media queries, and if the style is applied then the media query was true. This works in Firefox 5, but not in 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 };
    }
}

This returns "5 1" in FF 5 and in Chrome console, but it returns "919 0" in IE 9. What is IE doing here? How can I work around?

Here is an example of the function call:
mediaQuery('screen and (min-width: 480px)').match

After some testing I have found that the width matches 100% of the screen width.
Why isn't the media query working in IE, it works in FF and Chrome...
Maybe IE is just not processing the CSS before I test the width in javascript?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

耳钉梦 2024-12-04 13:34:03

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

I figured this out.
IE only applies css to elements in the body, in order to get it to use the css you have to place the div within a fake body (because the real body hasn't loaded yet). Here is the finished script:

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

回复收藏 0 原文

~没有更多了~