必须用JavaScript调用requestFullscreen()且仅限用户手势触发，否则静默失败或抛NotAllowedError；需确保元素已挂载DOM、可见、非跨域iframe未授权、iOS上仅video或带allow="fullscreen"的iframe可用，并按标准→webkit→moz→ms顺序兼容调用。
不能靠 HTML 标签或纯 CSS 实现真正的浏览器全屏，必须用 JavaScript 调用 requestFullscreen()，且只能在用户点击、触摸等手势中触发——否则直接静默失败或抛 NotAllowedError。
为什么 requestFullscreen() 总是不生效
几乎全是上下文或状态问题，不是代码写错了：
- 调用不在用户手势里：比如放在
setTimeout、Promise.then、DOMContentLoaded或load事件中，手势链已断 - 目标元素还没插入 DOM：
document.getElementById('x')拿到的是 null，或刚new Element()就调，没appendChild - 元素不可见：设置了
display: none、visibility: hidden，或被父容器overflow: hidden裁掉 - 跨
<iframe></iframe>调用但没加allow="fullscreen"属性（如<iframe src="" allow="fullscreen"></iframe>） - iOS Safari 只允许
<video></video>或带allow="fullscreen"的<iframe></iframe>全屏，普通<div> 无效 <h3>怎么正确调用并兼容老浏览器</h3> <p>现代浏览器支持 <code>element.requestFullscreen()（返回 Promise），但旧版 Chrome/Safari/Firefox/IE 需前缀。别硬写死一个方法，要按顺序检测：- 先查
el.requestFullscreen（标准） - 再查
el.webkitRequestFullscreen（Safari、旧 Chrome） - 再查
el.mozRequestFullScreen（Firefox） - 最后查
el.msRequestFullscreen（IE11 / 旧 Edge）
示例函数：
立即学习“前端免费学习笔记（深入）”；
function enterFullscreen(el) { if (el.requestFullscreen) { el.requestFullscreen().catch(err => console.error('全屏被拒:', err.message)); } else if (el.webkitRequestFullscreen) { el.webkitRequestFullscreen(); } else if (el.mozRequestFullScreen) { el.mozRequestFullScreen(); } else if (el.msRequestFullscreen) { el.msRequestFullscreen(); } }document.fullscreenElement和fullscreenchange怎么用才可靠判断是否真进全屏，唯一可靠方式是读
document.fullscreenElement（注意拼写是fullscreen，不是fullScreen），并监听document上的fullscreenchange事件：- 监听必须绑在
document上，不是触发元素本身 -
document.fullscreenElement === null表示已退出；为 DOM 元素时表示当前全屏对象 - 别自己维护布尔变量，状态变化异步且可能由 ESC、标签页切换等外部行为触发
- Safari 旧版要用
webkitfullscreenchange和document.webkitFullscreenElement，建议加兼容层
全屏后样式错乱？
:fullscreen伪类怎么写CSS 的
:fullscreen是作用于**被调用requestFullscreen()的那个元素本身**，不是它的子元素或body：- 必须带元素选择器，如
#player:fullscreen或video:fullscreen，不能只写:fullscreen - 不要用
*:fullscreen—— 太宽泛，部分浏览器不识别 - 不同浏览器支持略有差异：Safari 仍需
-webkit-full-screen，可并列写多条规则 - 全屏时浏览器会重置默认 margin/background，建议显式设
margin: 0、width: 100vw、height: 100vh
真正难的不是调用那行代码，而是处理 iOS Safari 的限制、iframe 的授权、以及退出后样式和状态的同步——这些点漏掉一个，用户就只会觉得“点了没反应”。
- 先查
