现代浏览器中Element.requestFullscreen()必须由用户手势同步触发，异步调用会静默失败或拒绝；需用.catch()捕获NotAllowedError等错误，通过document.fullscreenElement和fullscreenchange事件判断/响应全屏状态。
直接说结论：现代浏览器中，Element.requestFullscreen() 是标准全屏 API，但必须由用户手势触发（如 click、tap），且需处理不同浏览器前缀和 Promise 返回值；不满足条件会静默失败或抛出 TypeError。
为什么调用 requestFullscreen() 没反应？
最常见原因是触发时机违规：该方法只能在用户交互事件（如 click、keydown）的同步执行路径中调用。异步回调（如 setTimeout、Promise.then）、页面加载完成钩子（DOMContentLoaded）或定时器中调用，浏览器会直接拒绝。
- 检查是否在
button.addEventListener('click', () => el.requestFullscreen())这类直接事件处理器里调用 - 避免封装成普通函数后脱离事件上下文，例如：
function goFull() { el.requestFullscreen() }→ 在click里调用goFull()仍有效，但若在setTimeout(goFull, 100)中就失效 - Chrome/Firefox/Safari 对“用户手势”的认定越来越严格，长按、右键、键盘修饰键（如 Ctrl+Click）可能不被识别为有效手势
requestFullscreen() 的兼容写法与错误处理
虽然标准方法是 element.requestFullscreen()，但旧版 Chrome/Safari 用 webkitRequestFullscreen()，Firefox 早期用 mozRequestFullScreen()（注意大小写）。现在可统一用标准名，但必须加 catch 处理拒绝情况 —— 它返回 Promise，失败时不会抛异常，而是 reject。
el.requestFullscreen()
.catch(err => {
console.error('全屏请求被拒绝：', err.name); // 常见 err.name：'NotAllowedError'、'NotFoundError'
});
- 不要只依赖
if (el.requestFullscreen)判断可用性，现代浏览器都支持标准方法，重点在 Promise 状态 -
err.name === 'NotAllowedError'表示未满足用户手势要求；'NotFoundError'表示元素已从 DOM 移除或不可全屏（如<iframe>默认禁止） - 部分场景下需显式设置
allowfullscreen属性（如嵌套<iframe>）
如何判断当前是否处于全屏状态？
不能靠监听事件或轮询 DOM，应使用 document.fullscreenElement（注意拼写是 fullscreen，不是 fullScreen）。
-
document.fullscreenElement返回当前全屏的 Element，为null表示未全屏 - 监听
fullscreenchange事件比轮询更可靠：document.addEventListener('fullscreenchange', () => {...}) - 旧前缀如
document.webkitIsFullScreen、document.mozFullScreen已废弃，无需兼容 - 注意：全屏退出时
fullscreenchange事件触发，但document.fullscreenElement已为null，适合在此更新 UI 状态
真正容易被忽略的是：全屏模式下页面缩放、滚动行为、焦点管理都会变化，尤其是 input 或 video 元素在全屏后可能失去焦点或播放控制权；如果业务逻辑依赖这些，得在 fullscreenchange 里主动恢复。
