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

问题描述：

我认为matchMedia在IE9中不支持，但媒体查询是。为什么在使用matchMedia时只能检查一个元素是否可见？

我可以在这里失去了一点，但为什么在你的JavaScript中使用matchMedia时，你可以将下面的代码简单地添加到您的样式表

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

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

，然后检查的条件如下？

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

所以你问，为什么不添加更多的代码，以更复杂的方式实现相同的事情，现在存在一个专门的方法...？因为我们要编写现代代码，而不是从石器时代拖延所有永恒的解决方案，以便沿着骑行过程大量过时的浏览器，这是巨大的安全灾难。（并且在我们实际上“必须”并且没有办法解决的情况下，我们可能宁愿在大多数情况下使用polyfill。） – CBroe

想要再次保证matchMedia没有做任何我忽略的事情。似乎我没有。谢谢。 –

答

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

每MDN Web Docs：

这使得可以观察到文件时，其媒体查询的变化，来检测的，而不是轮询值周期性，并允许您根据媒体查询程序进行更改文件状态。

此事件处理程序允许你不是简单地调用风格的变化，如，跟踪谁旋转为横向移动用户，是否您的网站是精心设计的肖像使用的晴雨表开发更复杂的功能。

我实施了你的'听onchange事件'的建议，它运作良好。然而，我开发应用程序的公司有许多访问者使用旧版浏览器。我已经重新思考，现在看到我的应用程序可以单独使用媒体查询进行配置，而不需要较少支持的匹配媒体，以便在大型桌面和小型手机页面上的正确元素布局可以通过在肖像和景观。然而，我会为其他应用程序保留matchmedia和使用onchange。谢谢。 –

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

相关推荐