块级元素全屏必须由用户手势触发，iframe需加allow="fullscreen"，:fullscreen伪类作用于被全屏元素而非body，safari/firefox需兼容前缀，退出须监听fullscreenchange并以document.fullscreenelement为准。
块级元素调用 requestFullscreen() 必须由用户点击触发
不能在页面加载或定时器里直接调用，否则浏览器会静默拒绝——连错误都不抛，只让 Promise 永远 pending 或直接 resolve 失败。常见现象是“点了按钮没反应”，查 console 也看不到报错。
- 正确做法：绑定到
click、touchend等明确的用户手势事件上 - 错误写法：
element.requestFullscreen()放在window.onload或setTimeout里 - iframe 内使用需加
allow="fullscreen"属性，否则直接被拦截
:fullscreen 伪类只作用于被全屏的元素，不是 body
很多人写 body:fullscreen { width: 100vw; height: 100vh; }，结果样式不生效——因为真正被全屏的是你调用 requestFullscreen() 的那个 div，不是 body。
- 假设你对
id="panel"的div调用了全屏，就该写：#panel:fullscreen { width: 100vw; height: 100vh; margin: 0; } - Safari 仍需兼容
#panel:-webkit-full-screen，Firefox 旧版要#panel:-moz-full-screen，现代写法建议并列声明 - 全屏后默认会移除 margin、设为 flex 容器，但
position: fixed元素可能被截断，改用position: absolute; inset: 0;更稳
退出全屏必须监听 fullscreenchange，别信自己维护的布尔变量
document.fullscreenElement 是唯一可信的状态来源。用户按 ESC、切标签页、调用 document.exitFullscreen() 都会触发 fullscreenchange，但不会触发 fullscreenend（后者已被多数浏览器废弃）。
- 监听写法：
document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement) { /* 已退出 */ } }) - 别用
isFullscreen = true这种手动开关，容易和真实状态脱节 - 退出时记得清理副作用，比如恢复
overflow: hidden、重置 canvas 尺寸等
移动端基本不支持真正的页面全屏，别硬刚
iOS Safari 对 requestFullscreen() 完全无效；安卓 Chrome 虽支持，但地址栏/系统 UI 不会隐藏，所谓“全屏”只是内容拉伸填充可视区域。
- 视频类场景优先用
<video allow="fullscreen" webkit-playsinline></video>，比 JS 全屏可靠得多 - 想接近沉浸体验，PWA 的
"display": "standalone"清单配置才是正解 - Canvas 全屏不要依赖 API，直接用
canvas.width = window.innerWidth+resize监听更可控
实际开发中，最易被忽略的是错误捕获和状态监听的组合缺失——调用没加 .catch()，监听没用 document.fullscreenElement 判断，导致“看似调用了却没效果”这种问题反复出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
