如何让 JavaScript 仅在特定屏幕尺寸下执行？-html教程-PHP中文网

如何让 JavaScript 仅在特定屏幕尺寸下执行？

本文介绍如何使用 window.matchMedia() 动态控制 JavaScript 行为的触发条件，确保移动菜单交互逻辑（如禁用页面滚动、点击收起菜单）仅在指定断点（如 ≤768px）下生效，避免桌面端误触发。

本文介绍如何使用 window.matchmedia() 动态控制 javascript 行为的触发条件，确保移动菜单交互逻辑（如禁用页面滚动、点击收起菜单）仅在指定断点（如 ≤768px）下生效，避免桌面端误触发。

要让 JavaScript 仅在特定屏幕尺寸（例如移动设备常见的 ≤768px 宽度）下运行，不推荐使用 screen.width——因为它返回的是设备物理屏幕宽度，与当前浏览器视口无关，且无法响应窗口缩放或横竖屏切换。更可靠、现代且语义清晰的方式是使用 window.matchMedia() API，它基于 CSS 媒体查询逻辑，支持监听视口变化，并精准匹配响应式设计中的断点。

以下是优化后的完整实现方案：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

// 定义媒体查询：匹配移动端视口（最大宽度 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. 避免对所有

全局绑定（可能影响导航、页脚等非菜单列表），建议限定在菜单容器内（如 '.cp_menu li'）； // 3. 若使用 checkbox + label 实现汉堡菜单，确保 HTML 结构语义正确，且 .cp_menuicon 是可点击的触发元素； // 4. 如需兼容 IE10+，matchMedia 可安全使用（无需 polyfill）；若需支持更老版本，可降级为 resize 事件 + debounce，但性能和精度较差。

该方案优势明显：
✅ 响应式感知强：自动响应窗口缩放、设备旋转；
✅ 性能友好：无高频 resize 监听，无节流必要；
✅ 解耦清晰：媒体查询逻辑与业务逻辑分离，便于测试与扩展；
✅ 渐进增强：即使 JS 失效，CSS 媒体查询仍可保证基础样式适配。

最后提醒：将此脚本置于 底部或使用 DOMContentLoaded 包裹，确保 DOM 元素已就绪。如项目使用模块化构建工具（Webpack/Vite），还可进一步封装为可复用的 hook 或组件逻辑。