必须由用户手势触发requestFullscreen()，且仅对已挂载的DOM元素调用；监听fullscreenchange事件需绑定document并检查document.fullscreenElement；退出全屏须调用document.exitFullscreen()并处理Promise。
怎么用 requestFullscreen() 触发全屏
浏览器原生全屏不是靠 CSS 撑起来的，必须调用元素的 requestFullscreen() 方法。它只能由用户手势（比如 click、keydown）触发，不能在页面加载或定时器里直接调用，否则会被浏览器静默拒绝。
常见错误现象：Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
- 只对一个 DOM 元素调用，通常是
<div id="viewer">或<video>这类容器 - 必须确保该元素已挂载到文档中（
document.body.contains(el)为 true），否则报错 - 移动端 Safari 对
<iframe>内内容限制更严，需加allow="fullscreen"属性 - 不要写成
document.requestFullscreen()—— 那是让整个页面全屏，但实际兼容性差，且现代浏览器基本不支持
为什么 fullscreenchange 事件监听不到
全屏状态变化是异步的，而且事件名大小写敏感：标准是 fullscreenchange，不是 fullscreenChange 或 onfullscreenchange。监听对象也不是 document 就完事，得看谁发起的全屏 —— 但状态变化统一在 document 上抛出。
- 必须用
document.addEventListener('fullscreenchange', handler)，别绑在触发元素上 - 判断是否真进入全屏，要查
document.fullscreenElement（注意拼写是fullscreen，不是fullScreen或FullScreen） - 退出全屏时
document.fullscreenElement为null，别误判为undefined - Chrome 和 Firefox 支持良好，但旧版 Safari 用的是
webkitfullscreenchange和document.webkitFullscreenElement，建议加兼容层
全屏后样式错乱？:fullscreen 伪类怎么写才生效
CSS 的 :fullscreen 是作用于当前全屏元素本身的，不是它的子元素。而且它不支持链式写法（比如 .container:fullscreen .content 在某些浏览器里会失效），优先用直接作用于全屏元素的规则。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是
video:fullscreen或#player:fullscreen，不能漏掉冒号前的元素选择器 - 不要依赖
*:fullscreen—— 太宽泛，且部分浏览器不识别 - 全屏状态下浏览器会重置部分默认样式（比如
margin、background），建议显式重设body或容器的margin: 0和width/height: 100vh - 若用
transform: scale()或position: fixed做自定义全屏，本质不是真正全屏，无法响应fullscreenchange事件
退出全屏失败？exitFullscreen() 的调用位置很关键
exitFullscreen() 只能从 document 调用，不是从某个元素调用。而且它返回 Promise，但多数场景下你得等它 resolve 才能安全执行后续逻辑（比如恢复按钮状态）。
- 正确写法是
document.exitFullscreen()，不是el.exitFullscreen() - 调用前最好先检查
document.fullscreenElement是否存在，避免无意义调用导致 rejected Promise - 如果之前是用
el.requestFullscreen()进入全屏，退出时不需要指定元素，浏览器自动知道退哪个 - 某些安卓 WebView 中，
exitFullscreen()可能不触发fullscreenchange事件，建议加 timeout fallback 或轮询document.fullscreenElement
真正麻烦的不是调用 API，而是不同浏览器对“谁算用户手势”的认定差异 —— 比如在 setTimeout 里包装 click 事件，或者从自定义事件转发过来的 click，在 Safari 上大概率被判定为非可信事件。这点很容易被忽略，直到 QA 提出“点按钮没反应”才回头查。
