我需要一种简单的方法来使用jquery检测CSS3媒体查询支持

Question

我需要一种快速而肮脏的方法来使用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

编辑:我不再策划这个答案,因为我觉得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 Mobile
• Chrome 26

我已经在以下不支持媒体查询的浏览器中进行了测试,所有正确返回false:

• IE 7

Answer 2

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

在您的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);