本文介绍如何使用 window.matchMedia() 动态控制 JavaScript 行为的触发条件，确保移动菜单交互逻辑（如禁用页面滚动、点击收起菜单）仅在指定断点（如 ≤768px）下生效，避免桌面端误触发。
本文介绍如何使用 window.matchmedia() 动态控制 javascript 行为的触发条件，确保移动菜单交互逻辑（如禁用页面滚动、点击收起菜单）仅在指定断点（如 ≤768px）下生效，避免桌面端误触发。
要让 JavaScript 仅在特定屏幕尺寸（例如移动设备常见的 ≤768px 宽度）下运行，不推荐使用 screen.width——因为它返回的是设备物理屏幕宽度，与当前浏览器视口无关，且无法响应窗口缩放或横竖屏切换。更可靠、现代且语义清晰的方式是使用 window.matchMedia() API，它基于 CSS 媒体查询逻辑，支持监听视口变化，并精准匹配响应式设计中的断点。
以下是优化后的完整实现方案：
// 定义媒体查询：匹配移动端视口（最大宽度 768px）
const mobileQuery = window.matchMedia('(max-width: 768px)');
// 封装移动端专属逻辑（可复用、易维护）
function initMobileMenu() {
const toggle = document.getElementById('cp_toggle03');
if (!toggle) return;
// 控制 body 滚动
toggle.addEventListener('change', function () {
document.body.style.overflow = this.checked ? 'hidden' : '';
});
// 点击菜单项自动关闭（通过触发 toggle checkbox）
const menuItems = document.querySelectorAll('.cp_menu li'); // 推荐使用更精确的选择器
const closeTrigger = document.querySelector('.cp_menuicon');
menuItems.forEach(item => {
item.addEventListener('click', () => {
if (closeTrigger && closeTrigger.click) {
closeTrigger.click();
}
});
});
}
// 在匹配移动端时初始化，不匹配时可选择清理（如需）
function handleMediaChange(e) {
if (e.matches) {
initMobileMenu();
} else {
// 可选：桌面端恢复默认行为（如释放 overflow）
document.body.style.overflow = '';
}
}
// 首次加载时立即检查，再监听后续变化
handleMediaChange(mobileQuery);
mobileQuery.addEventListener('change', handleMediaChange);
// ⚠️ 注意事项：
// 1. 使用 querySelector / querySelectorAll 替代 getElementsByTagName / getElementsByClassName，
// 因为前者返回静态 NodeList，后者是动态集合，易引发循环引用或索引错乱；
// 2. 避免对所有 <li> 全局绑定（可能影响导航、页脚等非菜单列表），建议限定在菜单容器内（如 '.cp_menu li'）；
// 3. 若使用 checkbox + label 实现汉堡菜单，确保 HTML 结构语义正确，且 .cp_menuicon 是可点击的触发元素；
// 4. 如需兼容 IE10+，matchMedia 可安全使用（无需 polyfill）；若需支持更老版本，可降级为 resize 事件 + debounce，但性能和精度较差。该方案优势明显：
✅ 响应式感知强：自动响应窗口缩放、设备旋转；
✅ 性能友好：无高频 resize 监听，无节流必要；
✅ 解耦清晰：媒体查询逻辑与业务逻辑分离，便于测试与扩展；
✅ 渐进增强：即使 JS 失效，CSS 媒体查询仍可保证基础样式适配。
最后提醒：将此脚本置于 底部或使用 DOMContentLoaded 包裹，确保 DOM 元素已就绪。如项目使用模块化构建工具（Webpack/Vite），还可进一步封装为可复用的 hook 或组件逻辑。
