为什么在检查元素是否可见时使用matchMedia？

Question

我认为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
}

Answer 1

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

每MDN Web Docs：

  

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

此事件处理程序允许您开发更复杂的功能，而不仅仅是调用样式更改 - 例如，跟踪旋转到横向的移动用户，作为您的网站是否经过精心设计以供纵向使用的晴雨表。