javascript - 当您可以检查元素是否可见时，为什么还要使用 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 文档：

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

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