如果不调整大小，超过 window.matchMedia 将不起作用

【问题标题】：more than on window.matchMedia does not work if not resized如果不调整大小，超过 window.matchMedia 将不起作用
【发布时间】：2020-06-23 04:09:39
【问题描述】：

我有响应式 javascript 的代码，我使用$(window).resize(function()，如果宽度小于 768px 它将执行函数，如果宽度大于 768px 将使用其他函数。

代码有效，但如果我的页面被加载，“超过” 功能不起作用，但如果我尝试调整大小或使用“检查元素”，则代码有效。

其他情况，我使用 $（文档）.ready（函数（）{ 该函数运行正常，但是在尝试调整屏幕大小时，“超过”代码不起作用。

这是我的代码

$(window).resize(function() {
    if (window.matchMedia('(max-width: 765px)').matches) {
    //applied when the viewing area's width is 765px
    }else{
    //the function here does not work if the browser is not resized
});

【问题讨论】：

标签： javascript jquery responsive window-resize

【解决方案1】：

这是意料之中的，您正在侦听 resize 事件，在页面加载时不会触发该事件，因为窗口尚未调整大小。

但是你真的不需要，甚至不应该在这里监听 resize 事件。

matchMedia 返回的MediaQueryList 实例有一个onchange 事件处理程序。只听这个，不要创建大量无用的 MediaQueries：

虽然这个事件也不会在页面加载时触发，所以你仍然需要调用自己一次处理程序。

const query = window.matchMedia('(max-width: 765px)');
query.onchange = (evt) => {
  if( query.matches ) { console.log( "now it matches" ); } 
  else { console.log( "now it doesn't match" ); } 
};
// perform the initial check
query.onchange();

【讨论】：