requestFullscreen() 必须由可信用户手势触发且目标元素已挂载DOM，否则报错；需按标准及前缀顺序调用并捕获错误，监听document上的fullscreenchange事件，正确使用:fullscreen伪类和dvh单位。
必须由用户手势触发 requestFullscreen()，且目标元素得已在 DOM 中挂载；否则直接报错或静默失败。
为什么 requestFullscreen() 调用后没反应或报错
常见错误是把它放在页面加载、setTimeout 或异步回调里执行，浏览器会拒绝并抛出 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.。另一个高发原因是目标元素还没插入文档（比如在 document.createElement('div') 后立刻调用，但没 appendChild）。
- 确保调用发生在
click、keydown（且event.isTrusted === true）等可信用户事件中 - 检查
document.body.contains(el)返回true，否则先document.body.appendChild(el) - 不要对
<iframe>内部内容调用——除非该 iframe 带有allow="fullscreen"属性，且同源 - 移动端 Safari 对
<video>全屏较宽松，但对普通<div>仍可能拦截
如何兼容 Chrome/Firefox/Safari/Edge 的前缀差异
现代标准是 element.requestFullscreen()，但旧版浏览器仍需兜底。不能只写一个，也不能靠 || 连写——因为部分浏览器（如旧 Safari）虽有 webkitRequestFullscreen，但 requestFullscreen 也存在却不可用。
- 按顺序检测并调用：
el.requestFullscreen()→el.webkitRequestFullscreen()→el.mozRequestFullScreen()→el.msRequestFullscreen() - 每个调用都应加
.catch()，捕获如NotAllowedError（手势缺失）、SecurityError（跨域 iframe）等 - 退出时同理：优先用
document.exitFullscreen()，再 fallback 到webkitExitFullscreen、mozCancelFullScreen、msExitFullscreen - 别漏掉
document.fullscreenElement的拼写——是fullscreen，不是fullScreen或FullScreen
fullscreenchange 事件监听不到或判断失效
这个事件只在 document 上触发，大小写敏感，且状态变更后需主动查 document.fullscreenElement 才能确认是否真进全屏——它返回当前全屏的 DOM 元素（非布尔值），退出时为 null，不是 undefined。
立即学习“前端免费学习笔记（深入）”；
- 绑定必须写成
document.addEventListener('fullscreenchange', handler)，绑在元素上无效 - 旧版 Safari 用
webkitfullscreenchange，Firefox 旧版用mozfullscreenchange，建议统一监听两个事件 - 不要依赖
document.isFullscreen（不存在）、document.fullscreen（已废弃） - 进入全屏后，
document.fullscreenElement是你当初调用requestFullscreen()的那个元素，可用于动态加 class 或重设样式
:fullscreen 伪类样式不生效
CSS 的 :fullscreen 只作用于当前全屏的元素本身，而且必须带具体选择器前缀，不能单独写 :fullscreen 或套在子元素上。
- 正确写法是
#player:fullscreen或video:fullscreen；.container:fullscreen .content在 Safari 中大概率失效 - 避免用
*:fullscreen——部分浏览器不支持，且易被其他规则覆盖 - 全屏时浏览器会重置默认 margin/padding，建议显式写
#player:fullscreen { margin: 0; width: 100vw; height: 100dvh; }，用dvh（dynamic viewport height）比vh更稳，尤其在移动端地址栏收放时 - 退出全屏后，若页面底部出现黑边（Safari 常见），可加
document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) window.scrollTo(0, 0); })
