requestFullscreen()必须由用户手势（如click）同步触发，否则浏览器静默拒绝；需检查元素是否挂载且可见，iframe需加allow="fullscreen"；退出时须先判document.fullscreenElement再调document.exitFullscreen()并兼容前缀。
全屏切换功能不是加个属性就能用，必须由用户点击触发、正确判断状态、兼容旧浏览器，且退出逻辑不能只靠 ESC 键。
requestFullscreen() 为什么点了没反应
绝大多数“没反应”都是因为调用时机错了——requestFullscreen() 必须在用户手势（如 click、touchend）的同步上下文中执行，不能放在 setTimeout、Promise.then、DOMContentLoaded 或视频 play() 回调里。否则浏览器静默拒绝，控制台可能只报 NotAllowedError 或完全无提示。
- 确保目标元素已挂载 DOM 且可见（
display: none或visibility: hidden会导致失败） - 若目标是
<iframe></iframe>，必须带allow="fullscreen"属性 - iOS Safari 对
video元素支持最稳定，其他元素在部分版本中会被忽略 - 不要对
document.body调用，优先用document.documentElement或具体容器（如document.getElementById('app')）
怎么写一个兼容所有主流浏览器的 enterFullscreen 函数
现代浏览器基本支持 element.requestFullscreen()，但 Chrome 69 前、Firefox 63 前、Safari 12.1 前仍需前缀。不能只检测一次就放弃，要按优先级 fallback：
- 先试
el.requestFullscreen()（返回 Promise，记得.catch()） - 再试
el.webkitRequestFullscreen()（Safari / 旧 Chrome） - 再试
el.mozRequestFullScreen()（旧 Firefox，注意大小写） - 最后试
el.msRequestFullscreen()（IE11 / 旧 Edge）
示例：
function enterFullscreen(el) {
if (el.requestFullscreen) {
el.requestFullscreen().catch(e => console.error('全屏被拒:', e.name));
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
}
}
如何可靠判断是否已进入/退出全屏
document.fullscreenElement 是唯一可信依据——它返回当前被全屏的 DOM 元素，退出后为 null（不是 undefined，也不是布尔值）。别自己维护开关变量，也别用不存在的 document.isFullscreen。
- 监听必须绑定在
document上：document.addEventListener('fullscreenchange', handler) - 不要监听
fullscreenend，它不被所有浏览器支持 - Safari 触发
fullscreenchange稍有延迟，读取document.fullscreenElement前可加Promise.resolve().then(...)微任务兜底 - 用户按 ESC、点系统返回键、切走标签页都会触发该事件，JS 无法拦截，只能靠它同步 UI
退出全屏为什么 document.exitFullscreen() 没效果
document.exitFullscreen() 不是“强制退出”，而是“尝试退出当前全屏状态”。如果此时 document.fullscreenElement === null，它会直接 resolve 一个空 Promise；但如果页面曾有多个元素先后全屏、未清理干净，或某些 WebView 根本不支持该方法，就会无响应或报 NotFoundError。
- 调用前务必检查：
if (document.fullscreenElement) document.exitFullscreen(); - 同样要兼容前缀：
document.exitFullscreen()→document.webkitExitFullscreen()→document.msExitFullscreen() - 移动端没有 ESC 键，必须提供显式退出按钮，且按钮点击事件也要满足用户手势要求
- 退出后建议重置滚动位置、恢复原样式类、重新聚焦 input 等，否则退出瞬间可能出现布局跳变或焦点丢失
真正难的不是调用 API，而是处理那些“看起来成功了，其实没进全屏”或“UI 显示已退出，但 document.fullscreenElement 还是非 null”的边界情况。每次调用后都该用 document.fullscreenElement 实时验证，而不是依赖 Promise 的 resolve 状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
