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比你表现出来的更强大。它不仅允许您以编程方式使用浏览器的 native 媒体查询解析，而且返回对象 ( MediaQueryList ) 允许您监听与用户视口(viewport)中的更改相对应的事件(通过 onchange )。

每MDN Web Docs :

This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status.

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