requestfullscreen() 无反应大概率是触发条件未满足：必须在真实 click 回调中调用，目标元素需已挂载且可见，不能对 body 调用，iframe 需加 allow="fullscreen"，状态同步依赖 fullscreenchange 事件而非布尔变量。

requestFullscreen() 无反应，怎么快速定位问题

大概率不是代码写错了，而是触发条件没满足——浏览器会静默失败，不报错、不进全屏、document.fullscreenElement 始终为 null。

• 确认是否在真实 click 回调里调用：不能包在 setTimeout、fetch().then 或组件 mounted 的异步钩子里
• 检查目标元素是否已挂载且可见：el.offsetParent !== null，不能是 display: none 或 visibility: hidden
• 别对 document.body 调用：Safari 直接拒绝；优先用 document.documentElement 或具体容器（如 div#app）
• 若页面嵌在 <iframe></iframe> 中，必须加 allow="fullscreen" 属性，否则静默失败

按钮文案和图标状态不同步，原因在哪

只监听点击事件，没响应浏览器原生退出（比如按 ESC、切后台、锁屏），就会导致 UI 状态脱节。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 必须监听 document.addEventListener('fullscreenchange', handler)，而不是绑在按钮或容器上
• 状态判断唯一可靠依据是 document.fullscreenElement === targetEl，不是布尔变量或 document.isFullscreen（根本不存在）
• Safari 触发 fullscreenchange 有微小延迟，读取前建议加 queueMicrotask(() => {...}) 或 Promise.resolve().then(() => {...})
• 图标切换推荐用 class 控制：btn.classList.toggle('is-exit', !!document.fullscreenElement)，比拼接 innerHTML 更稳定

document.exitFullscreen() 报错或无效，该怎么处理

document.exitFullscreen() 是全局方法，不接受参数，也不能在元素上调用——container.exitFullscreen() 会直接报错。

• 统一用 document.exitFullscreen().catch(() => {})，不要提前判空再调用（if (document.fullscreenElement) ... 多余且不可靠）
• 旧版 Edge 可能抛 NotFoundError，未捕获会导致控制台污染甚至中断后续脚本
• 退出后状态更新必须依赖 fullscreenchange 事件，不能靠 exit 调用后的同步判断
• 别混淆 requestFullscreen() 和 exitFullscreen() 的作用对象：前者在元素上调用，后者只在 document 上存在

iOS Safari 全屏行为异常，能做什么

iOS Safari 对非 <video></video> 元素的全屏支持极严，普通 <div> 全屏基本无效，且系统策略优先级高于 JS 控制。 <ul> <li> <code><video></video> 必须带 playsinline 属性，否则可能静默失败

全屏按钮点击后，需先调用 video.play()（并确保 muted），再紧跟着 video.requestFullscreen()

用户按 ESC 或锁屏退出时，fullscreenchange 可能滞后或丢失，建议配合 visibilitychange 事件兜底

不要默认 dialog + video 在 iOS 上能真正“覆盖系统 UI”——它仍会跳转到原生播放器，JS 控制权有限

实际写的时候，最容易被忽略的是：**fullscreenchange 事件不带任何参数，也不告诉你谁进了/出了全屏，全靠你主动查 document.fullscreenElement；而这个值在 Safari 里可能比事件晚一帧才更新。**