15

在 Javascript 中是否有直接的方法（不涉及解析 css 代码）来确定哪个媒体查询处于活动状态？

例如我有两个查询：

 @media screen and (max-width:800px)

 @media screen and (min-width:801px)

如果不解析和查看 clientWidth，我如何判断其中哪一个已评估为 true。

4

5 回答 5

15

虽然这是一个老问题，但在搜索这个问题时排名很高。

Window.matchMedia是官方的，所有主流浏览器（IE10+）都支持它，它允许您查询当前是否匹配某个媒体查询。

从原来的问题：

if (window.matchMedia('screen and (max-width:800px)').matches) {
    // it matches
} else {
    // does not match
}

您还可以通过将事件侦听器附加到返回的MediaQueryList来侦听查询匹配结果何时更改window.matchMedia：

var mql = window.matchMedia('screen and (max-width:800px)');
mql.addEventListener(
    function(mq) {
        if (mq.matches) {
            // it matches
        } else {
            // does not match
        }
    }
);
于 2016-03-21T14:47:58.007 回答
0

要查看不同媒体查询对调整大小或方向更改的反应，请尝试此页面上的演示：

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

您可以调整媒体查询属性以了解它们如何影响页面。

于 2011-04-20T16:43:17.243 回答
0

Paul Irish 的 MatchMedia 可能会成功： https ://github.com/paulirish/matchMedia.js

这适合你想做的事情吗？

于 2011-04-14T01:03:27.543 回答
0

嗨，我希望这会有所帮助，实际上我正在向选择器添加一个类，我正在使用这个工具：https ://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries -在-javascript/

事实上，他们有一个明确的例子说明在调整大小的窗口中打开了什么 http://robnyman.github.io/matchmedia/

就我而言，我只是在使用该功能的特定尺寸时执行特定任务。

于 2014-01-10T00:14:05.967 回答
0

我不确定您如何知道哪个媒体查询处于活动状态，但是...

...你不能用javascript检查屏幕宽度吗？

if ( window.innerWidth >= 801 ) {
    // @media screen and (min-width:801px)
} else {
    // @media screen and (max-width:800px
}

或者，我在这里错过了什么？

于 2016-02-09T03:03:19.720 回答