当您可以检查元素是否可见时，为什么还要使用 matchMedia？答案

【问题标题】：Why use matchMedia when you can just check if an element is visible?当您可以检查元素是否可见时，为什么还要使用 matchMedia？
【发布时间】：2017-10-14 19:37:31
【问题描述】：

我认为 IE9 不支持 matchMedia，但媒体查询支持。

我可能在这里忽略了这一点，但是当您可以简单地将以下代码添加到您的样式表时，为什么还要使用 matchMedia

.desktop_view{display:block;}
.mobile_view{display:none;}

@media all and (max-width: 700px){
    .desktop_view{display:none;}
    .mobile_view{display:block;}
}

然后检查您的 Javascript 中的条件如下？

if($("div.desktop_view").is(":visible")){
    // Do something applicable to desktops
}

【问题讨论】：

所以你在问，为什么不添加更多的代码以更复杂的方式实现同样的事情，当现在存在一个专门的方法时......？因为我们想要编写现代代码，而不是永远拖着石器时代的解决方案，只是为了让大量过时的浏览器顺其自然，这是巨大的安全灾难。（在我们实际上“必须”并且没有办法解决的情况下，在大多数情况下，我们可能更愿意使用 polyfill。）
想要保证 matchMedia 没有做任何我忽略的事情。好像我没有。谢谢。

标签： javascript media-queries matchmedia

【解决方案1】：

window.matchMedia 比你想象的更强大。它不仅允许您以编程方式使用浏览器的本机媒体查询解析，而且返回对象 (MediaQueryList) 允许您侦听与用户视口变化相对应的事件（通过 onchange）。

每MDN Web Docs:

这使得观察文档以检测其媒体查询何时更改成为可能，而不是定期轮询值，并允许您以编程方式根据媒体查询状态对文档进行更改。

此事件处理程序允许您开发比简单地调用样式更改更复杂的功能 - 例如，跟踪旋转到横向的移动用户，作为您的网站是否适合纵向使用的晴雨表。

【讨论】：

我实施了您的“聆听 onchange 事件”的建议，效果很好。然而，我正在为其开发应用程序的公司有许多使用旧版本浏览器的网站访问者。我进行了重新思考，现在看到我的应用程序可以单独使用媒体查询进行配置，而无需较少支持的 matchMedia，因此可以通过在纵向和纵向之间旋转平板电脑来简单地检查大型台式机和小型移动设备页面上的正确元素布局景观。但是，对于其他应用程序，我会牢记 matchmedia 和 onchange 的使用。谢谢。