直接调用element.requestFullscreen()必须由用户手势触发，否则浏览器静默拒绝；常见无反应原因是异步回调或自动逻辑中调用，违反用户激活要求，应绑定在click等事件处理器中并用.catch()捕获NotAllowedError等错误。
直接调用 element.requestFullscreen() 即可，但必须在用户手势（如 click、keydown）触发的上下文中执行，否则现代浏览器会静默拒绝。
为什么 requestFullscreen() 有时完全没反应
最常见原因是调用时机不符合“用户激活”（user activation）要求：比如在异步回调（setTimeout、fetch.then）、页面加载完成事件（DOMContentLoaded）或自动轮播逻辑中调用，浏览器会直接忽略且不抛错。
- ✅ 正确：绑定在按钮的
onclick或addEventListener('click', ...)里 - ❌ 错误：放在
window.onload里、或Promise.resolve().then(() => el.requestFullscreen()) - ⚠️ 注意：
requestFullscreen()返回 Promise，应检查.catch()捕获拒绝原因（如"NotAllowedError"）
如何兼容 Safari 和旧版 Chrome/Firefox
Safari 直到 iOS 16.4 / macOS 13.3 才支持标准 requestFullscreen()，更早版本需用带前缀的 webkitRequestFullscreen()；Firefox 曾用 mozRequestFullScreen()（注意大小写），但已废弃多年。实际只需保留 webkit 前缀兜底即可。
function enterFullscreen(el) {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
}
}
- 不需要判断
document.fullscreenElement的前缀变体，现代浏览器均已统一为无前缀属性 - 移动端 Safari 对
<video></video>全屏有额外限制：仅允许在playsinline属性未设置时，由用户点击触发全屏
退出全屏与监听状态变化
退出全屏不能靠用户按 Esc 键就认为“可控”，必须提供显式退出入口，并监听 fullscreenchange 事件来响应状态切换——该事件在 document 上触发，而非目标元素上。
立即学习“前端免费学习笔记（深入）”；
- 退出用
document.exitFullscreen()（同样需用户手势触发） - 监听写法：
document.addEventListener('fullscreenchange', () => { console.log(document.fullscreenElement); }) -
document.fullscreenElement为null表示未全屏；否则返回当前全屏的 DOM 元素 - 不要依赖
fullscreenerror事件：它极少触发，且错误信息模糊，优先靠requestFullscreen().catch()捕获
真正容易被忽略的是：全屏后页面滚动、焦点管理、CSS 伪类（:fullscreen）和键盘事件（如 F11 在某些系统会干扰）都可能表现异常，尤其在嵌套 iframe 或使用 Web Components 的场景下，fullscreenElement 的归属需要仔细验证。
