如何用JavaScript或CSS检测浏览器是否处于最大化状态？

问题背景 #

我正在制作一个用于客户端大型显示器/电视静态展示的仪表盘，核心需求是：仅在浏览器全屏或最大化/拉伸至屏幕全高状态时启用滚动吸附（snap-scroll）特性，其他状态下禁用该特性。

全屏状态可以通过CSS媒体查询直接实现：

@media all and (display-mode: fullscreen) {
  /* 全屏下启用滚动吸附 */
  .dashboard-container {
    scroll-snap-type: y mandatory;
  }
  .dashboard-section {
    scroll-snap-align: start;
  }
}

但浏览器最大化状态无法通过纯CSS检测——device-height属性已被废弃，需要结合JavaScript来判断窗口是否占满屏幕全高。

解决方案：JS检测窗口状态 + 动态切换CSS类 #

核心思路是通过JS对比浏览器可视高度与系统可用屏幕高度，判断窗口是否处于最大化/全高状态，再通过添加/移除CSS类来控制滚动吸附的启用与禁用。

1. 完整实现代码 #

HTML结构示例

<div class="dashboard-container">
  <section class="dashboard-section">面板1</section>
  <section class="dashboard-section">面板2</section>
  <section class="dashboard-section">面板3</section>
</div>

CSS样式

/* 默认状态：禁用滚动吸附 */
.dashboard-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: none;
}
.dashboard-section {
  height: 100vh;
}

/* 全屏状态：启用滚动吸附 */
@media all and (display-mode: fullscreen) {
  .dashboard-container {
    scroll-snap-type: y mandatory;
  }
  .dashboard-section {
    scroll-snap-align: start;
  }
}

/* JS标记的全高/最大化状态：启用滚动吸附 */
.dashboard-container.is-full-height {
  scroll-snap-type: y mandatory;
}
.dashboard-container.is-full-height .dashboard-section {
  scroll-snap-align: start;
}

JavaScript逻辑

const dashboardContainer = document.querySelector('.dashboard-container');

// 判断窗口是否处于全高状态
function checkFullHeightStatus() {
  // 计算浏览器可视高度与系统可用屏幕高度的差值
  const heightDiff = Math.abs(window.innerHeight - window.screen.availHeight);
  // 差值小于5px时判定为全高（兼容浏览器边框、标题栏的微小高度差）
  const isFullHeight = heightDiff < 5;

  isFullHeight 
    ? dashboardContainer.classList.add('is-full-height') 
    : dashboardContainer.classList.remove('is-full-height');
}

// 初始化检测
checkFullHeightStatus();
// 监听窗口大小变化
window.addEventListener('resize', checkFullHeightStatus);
// 监听全屏状态切换，确保样式同步
document.addEventListener('fullscreenchange', checkFullHeightStatus);

2. 关键细节说明 #

• window.screen.availHeight会自动排除系统任务栏、菜单栏等占用的空间，无需额外计算。
• 设置5px的误差阈值，是为了避免因浏览器窗口边框、标题栏的微小高度差异导致类名频繁切换。
• 同时监听fullscreenchange事件，确保全屏状态切换时样式能同步更新。

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