如何让移动端菜单JavaScript代码仅在指定屏幕尺寸下运行？

我有一段用于网站移动端菜单的JavaScript代码，实现了两个功能：

• 移动端菜单打开时禁止菜单外内容滚动
• 点击菜单项时自动关闭菜单

原代码如下：

document.getElementById('cp_toggle03').onchange = function() {
  if (document.getElementById('cp_toggle03').checked) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "";
  }
}

var elements = document.getElementsByTagName('li');
var closeHamp = function() {
  document.getElementsByClassName('cp_menuicon')[0].click();
};

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', closeHamp, false);
}

我希望这段代码仅在屏幕宽度≤768px的情况下运行，尝试了以下代码但未能生效，求可行解决方案：

function execute(){
   if(screen.width <= 768) {
   
   }
}

我的网站：morikoboshi.com

解决方案 #

问题症结 #

1. screen.width获取的是设备物理屏幕宽度，不会随浏览器窗口缩放变化，判断不准确
2. 仅定义了execute函数但未调用，也没处理窗口尺寸动态变化的场景
3. 没有考虑事件重复绑定的问题，可能导致功能异常

优化代码 #

// 封装移动端菜单核心功能，返回清理函数用于解绑事件
function initMobileMenu() {
  const toggle = document.getElementById('cp_toggle03');
  const menuItems = document.getElementsByTagName('li');
  const menuIcon = document.getElementsByClassName('cp_menuicon')[0];

  // 菜单切换时控制页面滚动
  const handleToggleChange = () => {
    document.body.style.overflow = toggle.checked ? 'hidden' : '';
  };

  // 点击菜单项关闭菜单
  const closeMenu = () => {
    menuIcon.click();
  };

  // 绑定事件
  toggle.addEventListener('change', handleToggleChange);
  Array.from(menuItems).forEach(item => {
    item.addEventListener('click', closeMenu);
  });

  // 返回清理函数，移除绑定的事件并恢复页面滚动
  return () => {
    toggle.removeEventListener('change', handleToggleChange);
    Array.from(menuItems).forEach(item => {
      item.removeEventListener('click', closeMenu);
    });
    document.body.style.overflow = '';
  };
}

let cleanupMobileMenu = null;

// 根据屏幕尺寸判断是否启用移动端菜单功能
function checkScreenSize() {
  const isMobile = window.innerWidth <= 768;

  if (isMobile && !cleanupMobileMenu) {
    // 移动端：初始化菜单功能
    cleanupMobileMenu = initMobileMenu();
  } else if (!isMobile && cleanupMobileMenu) {
    // 非移动端：清理已绑定的事件
    cleanupMobileMenu();
    cleanupMobileMenu = null;
  }
}

// 页面加载时执行一次初始化
window.addEventListener('load', checkScreenSize);
// 窗口尺寸变化时重新判断
window.addEventListener('resize', checkScreenSize);

代码说明 #

• 用window.innerWidth替代screen.width，准确获取浏览器可视窗口宽度，支持窗口缩放场景
• 封装功能函数并返回清理函数，避免窗口尺寸变化时重复绑定事件导致的多次触发问题
• 监听resize事件，实现屏幕尺寸在移动端/非移动端切换时自动启用/禁用菜单功能
• 页面加载时自动执行判断，确保初始状态符合预期

内容的提问来源于stack exchange，提问作者Richard Perkins