我需要一个简单的方法来检测CSS3媒体查询支持使用jquery [英] I need an easy way to detect CSS3 media query support using jquery

问题描述

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

I need a quick and dirty way to detect media query support using jquery. I defined a function as follows:

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

有人可以帮我解决这个问题吗？查看此页面：

Can someone help me fix this up a bit? Looking at this page:

http://caniuse.com / css-mediaqueries

我意识到这里有一些复杂性。例如，当我测试我的safari版本，我得到534.57.2。我想避免现在安装modernizr，主要是因为我在一个紧缩，我需要在短期内处理大多数情况。

I realized that there are some complexities here. For example, when I test my version of safari, I get "534.57.2". I want to avoid installing modernizr for now, mainly because I'm in a crunch and I need to handle most situations in the short term. Any help is appreciated!

推荐答案

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

You can create a stylesheet with a media query and see if it works.

在您的HTML中：

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

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

(Or you could dynamically create the stylesheet, but that's harder)

然后在脚本中：

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);

这篇关于我需要一个简单的方法来检测CSS3媒体查询支持使用jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！