JavaScript全屏API需兼顾兼容性、交互合规与状态管理：优先调用element.requestFullscreen()并降级处理webkit/moz前缀，必须由用户手势触发；退出统一用document.exitFullscreen()并检测fullscreenElement；通过fullscreenchange/error事件监听状态，注意iframe需allow="fullscreen"及移动端限制。
JavaScript全屏API的使用需兼顾浏览器兼容性、用户交互合规性及状态管理，核心是统一调用标准方法并正确处理前缀差异与事件响应。
进入全屏：优先使用标准方法，降级支持旧前缀
现代浏览器支持 Element.requestFullscreen()，但部分旧版Chrome/Safari仍需 webkitRequestFullscreen()，Firefox旧版用 mozRequestFullScreen()。不应直接调用 document.documentElement.requestFullscreen()，而应作用于具体容器元素（如一个 div），避免整个页面失控。
- 检查元素是否支持全屏：
if (element.requestFullscreen)再调用 - 触发必须由用户手势（如 click、keydown）发起，否则被浏览器静默拒绝
- 可传入可选配置对象控制方向，例如
element.requestFullscreen({ navigationUI: 'hide' })（仅部分浏览器支持）
退出全屏：统一调用 document.exitFullscreen()
退出操作不绑定在元素上，而是全局调用 document.exitFullscreen()。同样需兼容前缀：document.webkitExitFullscreen()、document.mozCancelFullScreen()。
- 调用前建议判断当前是否处于全屏状态：
document.fullscreenElement !== null - 避免重复调用，可在退出后清空相关 UI 状态（如切换“退出全屏”按钮为“进入全屏”）
- 注意：Safari 在 iOS 上不支持全屏 API，桌面版 Safari 16.4+ 才完整支持
监听全屏状态变化：用 fullscreenchange 和 fullscreenerror
全屏切换是异步行为，必须通过事件监听实际结果。监听对象是 document，而非具体元素。
立即学习“Java免费学习笔记（深入）”；
-
document.addEventListener('fullscreenchange', () => { ... })：进入或退出时触发，通过document.fullscreenElement判断当前状态 -
document.addEventListener('fullscreenerror', () => { ... })：权限被拒、非用户手势触发等失败时触发，应提示用户原因 - 建议在组件卸载或页面离开前移除事件监听，防止内存泄漏
安全与体验要点：不可忽略的细节
全屏模式受浏览器策略严格约束，违反规则会导致静默失败或报错。
- iframe 需添加
allow="fullscreen"属性才可触发其内部内容全屏 - 移动端（尤其是 Android Chrome）对 video 元素全屏有特殊优化，推荐用
<video>的原生 controls +webkit-playsinline配合 requestFullscreen - 全屏期间 document.body 会自动添加
fullscreen类（部分浏览器），可用于 CSS 样式隔离 - 退出全屏后焦点可能丢失，必要时手动恢复 focus 到关键元素
