6

我需要一种快速而肮脏的方法来使用 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，主要是因为我很紧张，我需要在短期内处理大多数情况。任何帮助表示赞赏！

4

3 回答 3

14

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

破解打开的Modernizr（可以测试媒体查询），我们看到它使用了window.matchMedia（MDN 页面）功能。我们可以检查普通的旧 vanilla 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 移动版
  • 铬 26

我在以下不支持媒体查询的浏览器中进行了测试，都正确返回了 false：

  • 即 7
于 2013-06-19T23:31:34.427 回答
12

您可以使用媒体查询创建样式表并查看它是否有效。

在您的 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);
于 2012-12-02T02:00:31.940 回答
0

这是一些基于@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}
}
于 2012-12-02T04:15:34.800 回答