如何在JavaScript中以文档body宽度作为判断条件？

你的代码无法运行的核心问题是错误使用了document.body.width——这不是获取元素实际渲染宽度的标准属性，浏览器无法返回正确的body宽度值，导致判断逻辑失效。

正确获取body宽度的方法 #

要获取body的实际显示宽度，推荐使用以下两个标准属性：

• document.body.offsetWidth：包含元素宽度、内边距（padding）和边框（border），不含外边距（margin）
• document.body.clientWidth：包含元素宽度和内边距，不含边框与滚动条

修正后的判断代码 #

function openMenu() {
  const bodyWidth = document.body.offsetWidth;
  if (bodyWidth >= 415) {
    // 桌面大屏执行逻辑
    // 示例：document.querySelector('.sidebar').style.display = 'block';
  } else {
    // 移动小屏执行逻辑
    // 示例：document.querySelector('.sidebar').style.transform = 'translateX(-100%)';
  }
}

注意：原代码里的else if (bodyWidth <= 414)完全可以简化为else，因为414及以下的场景已经被else覆盖，无需重复判断。

响应式场景补充：监听窗口尺寸变化 #

如果需要在窗口大小改变时自动切换导航状态，需添加窗口resize事件监听：

// 页面加载时先执行一次初始化
openMenu();

// 窗口尺寸变化时重新触发判断
window.addEventListener('resize', openMenu);

额外优化建议 #

如果只是控制导航的显示/隐藏状态，优先使用CSS媒体查询实现，比JavaScript更高效且符合响应式设计的最佳实践：

/* 移动小屏（≤414px）样式 */
@media (max-width: 414px) {
  .sidebar-nav {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
}

/* 桌面大屏（≥415px）样式 */
@media (min-width: 415px) {
  .sidebar-nav {
    transform: translateX(0);
    transition: transform 0.3s ease;
  }
}

仅当需要结合复杂交互逻辑（比如点击触发+尺寸判断）时，再用JavaScript配合上述宽度判断逻辑。

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