我需要一个简单的方法使用jQuery来检测CSS3媒体查询支持(I need an easy way

我需要一个快速和肮脏的方式使用jQuery来检测媒体查询的支持。 我定义了一个函数，如下所示：

function mediaQueriesEnabled () {
   var v = parseFloat($.browser.version);
   if ($.browser.msie) {
      if (v < 9)
         return (false);
   }
   return (true);
}

有人可以帮助我解决这个问题了一点？ 看着这个页面：

http://caniuse.com/css-mediaqueries

我意识到有一些复杂性在这里。 例如，当我测试版本的Safari，我得到“534.57.2”。 我想避免现在安装Modernizr的，主要是因为我在一个紧缩和我需要处理在短期内大多数情况。 任何帮助表示赞赏！

Answer 1:

您可以创建一个媒体查询样式表，看看它是否工作。

在你的HTML：

<style>@media all and (min-width:1px) {
    .mediatest {position:absolute}
}</style>

（或者你可以动态地创建样式表，但是这很难）

然后，在你的脚本：

var d = document.createElement('div');
d.className = "mediatest";
document.body.appendChild(d);
if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
    // supports media queries!
}
document.body.removeChild(d);

Answer 2:

编辑：我不再策划这个答案，因为我觉得Niet的的要好得多（见选择的答案）。 它应该仍然工作，但可能需要一些测试。

破解开Modernizr的 （它可以测试媒体查询），我们可以看到它使用了window.matchMedia （ MDN页 ）功能。 我们可以在普通的旧香草JS检查，看看是否函数存在：

function mediaQueriesEnabled () {
    if(typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined") {
        return true;
    } else {
        return false;
    }
}

或者更优雅：

function mediaQueriesEnabled () {
    return (typeof window.matchMedia != "undefined" || typeof window.msMatchMedia != "undefined");
}

的jsfiddle

我一直在支持媒体查询，都正确返回true的以下浏览器测试：

• 移动Safari浏览器
• Chrome浏览器26

我已经不支持媒体查询以下浏览器进行测试，全部正常返回false：

• IE 7

Answer 3:

下面是基于@ Kolink的回答一些工作代码。 到目前为止，该代码的伟大工程......我会后回到这个线程，如果我有任何的修改。

JavaScript的：

var $globals = {
    mediaQuerySupport: false
}

function initMediaQueries () {
    // tests for media query support
    $globals.mediaQuerySupport = false;
    var d = document.createElement('div');
    d.className = "mediatest"; // found in core.css
    document.body.appendChild(d);
    if( window.getComputedStyle && window.getComputedStyle(d).position == "absolute") {
        $mlGlobals.mediaQuerySupport = true;
        mlDebug ('browser has media query support');
    }
    document.body.removeChild(d);
}

function mediaQueriesEnabled () {
   return ($globals.mediaQuerySupport);
}

$(document).ready(function() {
    initMediaQueries();
    if (mediaQueriesEnabled()) {
        ... do something
    }
});

在CSS（我说这个我的主要样式表文件）：

@media all and (min-width:1px) {
    .mediatest {position:absolute}
}

文章来源: I need an easy way to detect CSS3 media query support using jquery