监听全屏状态，UI自适应调整技巧

本文深入讲解了如何精准监听和响应网页全屏状态变化，涵盖通过 `fullscreenchange` 事件实时捕获切换、以 `document.fullscreenElement` 为唯一可信依据判断全屏状态、在用户手势中安全调用 `requestFullscreen()` 和 `exitFullscreen()` 并妥善处理 Promise 异常，以及结合 `:fullscreen` 伪类与动态 class 切换实现样式与 UI 的无缝适配——帮你轻松打造稳定、兼容、体验一致的全屏交互功能。

可以通过监听 fullscreenchange 事件来实时捕获全屏状态变化，并结合 document.fullscreenElement 判断当前是否处于全屏模式，进而动态调整 UI 布局或功能。

监听全屏状态变化

浏览器在进入或退出全屏时会触发 fullscreenchange 事件，该事件在 document 上监听：

• 使用 document.addEventListener('fullscreenchange', handler) 注册监听器
• 注意：不同浏览器可能有前缀（如 webkitfullscreenchange、mozfullscreenchange），但现代浏览器基本统一支持标准事件名
• 建议同时监听标准事件和常见前缀，提升兼容性（尤其需支持旧版 Safari 或 Firefox 时）

判断当前是否全屏

不要依赖事件触发次数或布尔标志位，应以 document.fullscreenElement 为准：

• 若值为 null，表示未处于全屏状态
• 若为一个 DOM 元素（如 或某个容器），表示该元素已全屏显示
• 可据此隐藏/显示控制栏、调整字体大小、禁用非关键按钮等

安全调用全屏与退出全屏

全屏 API 只能在用户手势（如 click、touchend）触发的上下文中调用，否则会被浏览器拒绝：

• 调用 element.requestFullscreen() 前确保是用户交互回调中执行
• 退出全屏统一用 document.exitFullscreen()，它也返回 Promise，可 await 处理后续逻辑
• 调用失败时（如被策略阻止），Promise 会 reject，建议加 .catch(e => console.warn('Exit fullscreen failed:', e))

适配样式与响应式 UI

全屏状态下视口尺寸突变，CSS 也可辅助响应：

• 利用 :fullscreen 伪类（或带前缀的 :-webkit-full-screen 等）直接定义全屏元素样式
• 配合 JavaScript 切换 class（如 body.classList.toggle('is-fullscreen', !!document.fullscreenElement)），让 CSS 控制整体布局变化
• 注意：某些 UI 组件（如弹窗、Tooltip）在全屏下可能被遮挡，需设置更高 z-index 或重定位

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《监听全屏状态，UI自适应调整技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。