大概率是触发时机或目标元素不合法：requestFullscreen()必须在click等用户手势的同步上下文中调用，异步延迟或非直接事件会静默失败；目标元素须已挂载、可见且非body/documentElement，推荐使用明确容器并.catch()捕获NotAllowedError等错误。
按钮点击后 requestFullscreen() 无反应，怎么排查
大概率是触发时机或目标元素不合法。现代浏览器只允许在用户手势（如 click、touchstart）的同步上下文中调用 requestFullscreen()，异步延迟（如 setTimeout）、非直接事件（如 input 后自动调用）都会静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保按钮绑定的是原生
click事件，不是自定义事件或委托到父级后误判了 target - 目标元素必须已挂载到 DOM 且可见：
getComputedStyle(el).display !== 'none'且未被visibility: hidden遮盖 - 别对
document.body或document.documentElement直接调用——Safari 会拒绝；推荐用一个明确的容器，如<div id="app"> - 加
.catch()捕获错误，常见e.name === 'NotAllowedError'就说明触发条件不满足
如何安全地切换全屏状态（进入/退出）
不能靠“记住上次状态”来决定调用哪个方法，必须以 document.fullscreenElement 为准。它为 null 表示未全屏，否则就是当前全屏元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮点击时先判断：
if (document.fullscreenElement) { document.exitFullscreen(); }，否则调用目标元素的requestFullscreen() -
document.exitFullscreen()是全局方法，永远不要写成el.exitFullscreen()——这个方法根本不存在 - 退出操作也必须由用户手势触发，不能放在定时器或
fetch回调里 - 统一用
try/catch包裹exitFullscreen()，因为旧版 Firefox 在非全屏状态下调用会抛NotFoundError
fullscreenchange 事件监听为什么没生效
这个事件**只能绑定在 document 上**，绑在按钮、容器或 window 上都收不到。而且它不携带任何目标信息，必须手动读 document.fullscreenElement 判断状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听写法固定为：
document.addEventListener('fullscreenchange', handler) - 退出时
document.fullscreenElement是null，不是undefined，判空要用=== null - Safari 触发
fullscreenchange稍有延迟，如果需要立刻读取状态，建议用Promise.resolve().then(() => {...})微任务延后读取 - 记得在组件卸载或页面销毁前调用
document.removeEventListener('fullscreenchange', handler)，避免内存泄漏
移动端和 Safari 的特殊限制有哪些
iOS Safari 对全屏支持极严：15.4+ 才允许非 <video> 元素全屏，且必须是用户主动点击触发；<iframe> 默认被禁，需加 allowfullscreen 属性；F11 类浏览器级全屏无法被 API 检测。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别在 iOS 上尝试让
<div>全屏——成功率极低，优先考虑用<video playsinline>+webkit-playsinline - 检测是否支持：
if ('requestFullscreen' in document.documentElement)，不依赖document.fullscreenEnabled（它只表示能力开关，不反映实际可用性） - 退出全屏后，iOS 可能残留地址栏遮挡或黑边，可加
window.scrollTo(0, 0)并重设body高度 - 用
min-height: 100dvh替代height: 100vh，避免退出全屏后视口高度跳变
