监听全屏状态，UI自适应调整方法

本文深入解析了如何精准监听和响应网页全屏状态变化，通过标准的 `fullscreenchange` 事件与可靠的 `document.fullscreenElement` 判断机制实现无误的状态识别，并强调在用户手势中安全调用 `requestFullscreen()` 和 `exitFullscreen()`（后者返回可 await 的 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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！