在$(document).ready()中使用带Listener的window.matchMedia的触发逻辑确认

你的理解完全正确，这段代码的触发逻辑就是仅当窗口宽度跨越860px阈值（从小于860px切换到大于860px，或反向切换）时，才会调用监听函数doMatchMediaResult。

具体说明： #

• window.matchMedia()返回的MediaQueryList对象，其监听回调的触发条件是媒体查询的匹配状态发生变化。也就是说，只有当当前窗口尺寸从满足(min-width: 860px)变为不满足，或者从不满足变为满足的瞬间，回调才会执行。
• 在同一区间内调整宽度（比如800px与700px之间、1000px与1200px之间），媒体查询的匹配状态没有改变（始终不满足或始终满足），所以不会触发回调。
• 页面启动时不触发，是因为addListener仅注册监听逻辑，不会主动执行一次回调来获取初始匹配状态。如果需要启动时就检查初始状态，可以在注册监听后手动调用一次回调函数，传入当前的MediaQueryList对象即可。

补充代码示例（添加初始状态检查）： #

$(document).ready(function () {
    mediaMatchMenu = window.matchMedia("(min-width: 860px)");
    mediaMatchMenu.addListener(doMatchMediaResult);
    // 手动调用，获取初始匹配状态
    doMatchMediaResult(mediaMatchMenu);
});

function doMatchMediaResult(arg) {
    console.log("in doMatchMediaResult, 当前是否满足阈值：", arg.matches);
}

内容的提问来源于stack exchange，提问作者gene b.