可通过监听 fullscreenchange 事件并检查 document.fullscreenelement 来准确判断全屏状态，据此动态调整ui；全屏api须在用户手势中调用，退出时用 document.exitfullscreen() 并处理 promise；css 可配合 :fullscreen 伪类和 class 切换实现响应式适配。

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

监听全屏状态变化

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

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

判断当前是否全屏

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

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

安全调用全屏与退出全屏

全屏 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 或重定位

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！