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

Posted 2023-02-21

【中文标题】我需要一种使用 jquery 检测 CSS3 媒体查询支持的简单方法

【英文标题】：I need an easy way to detect CSS3 media query support using jquery

【发布时间】：2012-11-19 21:11:03

【问题描述】：

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

【问题讨论】：

Modernizr 是 AFAIK 最快的方法。只需链接并测试一个变量。

或者您可以使用条件 html 踢 IE

您绝对应该为此使用功能检测，不要只排除低于 9 的 IE 版本。另外，如果您只是需要此功能，请不要使用 Modernizr ; Sandy Gifford 的答案效果很好，而且更轻量级。

我最终需要modernizr 来处理我现在正在使用的其他东西。在此之前，我使用了@Niet 的答案，效果很好。

【参考方案1】：

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

破解打开Modernizr（可以测试媒体查询）我们看到它使用了window.matchMedia（MDN page）函数。我们可以在普通的旧版 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：

IE 7

【讨论】：

很高兴知道...我绝对倾向于使用库，因为我认为目前还没有任何 JS 标准。

@Redtopia 记住 (A) 所有库在某些时候都是由标准 JS 组成的，并且 (B) 我很确定我给你的代码是万无一失的，我没有“JS标准”方法的意思不是很肯定。如果有帮助，我很乐意添加更多细节。

我并不是说您的答案不正确。我只是说明我更喜欢使用 HTML5/CSS3 框架而不是编写纯 JS 代码，因为测试各种浏览器支持通常需要更多时间。框架很好，恕我直言。你的代码可能是正确的！我确实为你的努力投了票！

谢谢 =) 我是一个老顽固的香草 JS 家伙。它让我深陷其中，就像它让我出局一样频繁。

这段代码给出了 IE9 的“不支持”，尽管它支持媒体查询。似乎适用于其他浏览器。

【参考方案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);

【讨论】：

谢谢！到目前为止效果很好！

只是想扔在那里，虽然我的答案有更多的选票，如果你可以使用这个，使用它。这是超级万无一失的。如果您想要一个纯 javascript 的解决方案，请务必使用我的；如果你不是那么疯狂，这就是你应该使用的。

【参考方案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