requestfullscreen() 必须由用户手势触发，目标元素需已挂载且可见，iframe 需加 allow="fullscreen"；全屏状态唯一可信标识是 document.fullscreenelement；退出必须显式调用 document.exitfullscreen() 并捕获错误。
requestFullscreen() 必须由用户 click 触发，否则静默失败
直接在 setTimeout、fetch().then 或页面 load 后调用 requestFullscreen()，浏览器会拒绝执行——不报错，也不进全屏，或者抛出 NotAllowedError: API can only be initiated by a user gesture。
实操建议：
- 按钮必须绑定真实的
click（或touchend，iOS Safari 建议统一用click）事件，不能包裹在异步回调里 - 目标元素（如
<div id="app">）需已挂载：检查 <code>document.getElementById('app') !== null且el.offsetParent !== null - 禁用
display: none或visibility: hidden；移动端<video></video>还要确保没设playsinline - 若页面嵌在
<iframe></iframe>中，必须加allow="fullscreen"属性，否则静默失败 - 切换按钮文案、图标等 UI 状态，必须读取
document.fullscreenElement === targetEl来判断，而不是靠“上次点了进还是出” - 监听状态变化只能绑在
document上：document.addEventListener('fullscreenchange', handler)，不能绑在触发元素上 - Safari 对
fullscreenchange的触发有微小延迟，需要时可用Promise.resolve().then(() => ...)延迟读取document.fullscreenElement - 退出前无需判空：
document.exitFullscreen()在非全屏状态下执行不会中断脚本（现代浏览器），但老版 Edge 可能抛NotFoundError - 统一加
.catch(() => {})捕获错误，避免未处理 promise rejection - 不要对
document.body或document.documentElement调用requestFullscreen()—— Safari 会拒绝，应选具体容器（如<main id="viewer"></main>） - 给目标容器写
#viewer:fullscreen { width: 100vw; height: 100vh; }，避免用!important覆盖内联样式 - 不要依赖
height: 100vh做全屏页布局——Safari 缩放时会失准，改用min-height: 100dvh（现代浏览器），回退到100vh - 全屏时隐藏无关 UI（如 header、nav），可用
:fullscreen > header { display: none; }，比 JS 切 class 更轻量
document.fullscreenElement 是唯一可信的状态标识
别用 document.isFullscreen（根本不存在），也别自己维护布尔变量。全屏状态只看 document.fullscreenElement：为 null 表示未全屏；否则返回当前被全屏的 DOM 元素（注意拼写是 fullscreen，不是 fullScreen）。
实操建议：
退出全屏必须显式调用 document.exitFullscreen()，且要捕获错误
document.exitFullscreen() 不是“可选操作”。仅靠用户按 Esc 键退出，你的 JS 逻辑无法响应，UI 状态极易脱节——比如按钮还显示“退出全屏”，实际早已退出。
实操建议：
全屏样式适配要用 :fullscreen 伪类，别硬写 height: 100vh
全屏后页面布局可能错乱，常见原因是 CSS 没适配全屏上下文。原生 :fullscreen 伪类比手动加 class 更可靠，且支持级联。
实操建议：
document.fullscreenElement 的值。这两个维度一旦错位，UI 就会不可控。
