requestFullscreen() 必须由用户手势触发，如 click 或 touchend；需兼容旧浏览器前缀并用 fullscreenchange 事件监听退出状态，CSS 需显式定义 :fullscreen 伪类样式。
HTML5 requestFullscreen() 怎么调用才有效
必须由用户手势触发（比如 click、keydown），不能在页面加载、定时器或异步回调里直接调；否则浏览器静默拒绝，控制台可能只报 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
- 正确姿势：绑定在按钮的
onclick或addEventListener('click', ...)里 - 移动端注意：部分 iOS Safari 要求同时监听
touchend，且不能有preventDefault()干扰 -
requestFullscreen()返回 Promise，记得用.catch()捕获失败（比如用户点了“拒绝全屏”）
不同浏览器的全屏 API 前缀怎么兼容
老版本 Chrome、Firefox、Safari 曾各自实现私有方法，现在虽已统一为标准 requestFullscreen()，但实际项目仍需兜底——尤其要支持到 Chrome 69 之前、Firefox 63 之前、Safari 12.1 之前的环境。
- 优先检测并调用
element.requestFullscreen() - fallback 到
element.webkitRequestFullscreen()（Safari / 旧 Chrome） - 再 fallback 到
element.mozRequestFullScreen()（旧 Firefox） - IE11 用
element.msRequestFullscreen()，注意它不返回 Promise，是同步行为
退出全屏后状态怎么安全重置
别只依赖 document.exitFullscreen()，它只对当前全屏元素生效，且失败时不抛错；更可靠的是监听 fullscreenchange 事件，在回调里检查 document.fullscreenElement 是否为 null 来确认真正退出。
-
document.fullscreenElement是判断当前是否处于全屏的唯一可信依据（不是布尔值，是 DOM 元素或null） - 退出前建议先保存原元素宽高、滚动位置等状态，避免全屏时样式重排导致退出后布局跳变
- 某些安卓 WebView 中，
fullscreenchange可能延迟触发或丢失，可加setTimeout双保险检测
全屏下 CSS 样式为什么没生效
全屏后浏览器会自动给全屏元素加一层伪类 :fullscreen（Chrome/Firefox）或 ::-webkit-full-screen（Safari），原有 CSS 选择器大多失效，必须显式重写。
立即学习“前端免费学习笔记（深入）”；
- 必须用
div:fullscreen { width: 100vw; height: 100vh; }这类规则覆盖默认缩放/边距 - Safari 对
::-webkit-full-screen支持更严格，不允许在里面用position: fixed，否则子元素可能错位 - 全屏元素内若含
iframe，需确保其allow="fullscreen"属性存在，否则无法在其中触发嵌套全屏
