全屏API的核心方法是requestFullscreen()；它返回Promise需显式处理，旧版浏览器有带前缀的变体；iOS Safari完全不支持，Android WebView需特定配置否则静默失败。
全屏 API 的核心方法是 requestFullscreen()，不是 fullscreen() 或 launchFullscreen()
浏览器不支持统一命名的“全屏函数”，必须调用 DOM 元素上的 requestFullscreen() 方法。这个方法返回 Promise，在现代浏览器中需显式处理；旧版 Chrome/ Safari 曾用 webkitRequestFullscreen()，Firefox 用过 mozRequestFullScreen() —— 现在已基本废弃，但若需兼容较老版本（如 Chrome
常见错误是直接调用 document.requestFullscreen() 而没检查元素上下文：该方法只能由**用户手势触发**（如 click、keydown），且必须作用于一个可渲染的 DOM 元素（<div>、<video>、<canvas> 等），不能直接对 document 或 window 调用（除非是 document.documentElement，但也不推荐）。
-
document.body.requestFullscreen()可行，但部分浏览器会拒绝非内容区域的全屏请求 - 更稳妥的做法是包裹一个
<div id="app">，然后调用document.getElementById('app').requestFullscreen() - 若调用后 Promise 拒绝，
catch中通常得到TypeError: Document not active或SecurityError，说明触发条件不满足
判断是否处于全屏状态，用 document.fullscreenElement，不是 isFullscreen 或 fullscreenEnabled
document.fullscreenElement 是当前处于全屏模式的 DOM 元素（null 表示未全屏），这是唯一可靠的状态判断依据。注意拼写是 fullscreen（无连字符），且大小写敏感 —— document.fullScreenElement（带大写 S）是旧 IE 的遗留写法，已无效。
document.fullscreenEnabled 仅表示“当前文档是否允许进入全屏”，它不反映实际状态，比如页面被 iframe 嵌入且 sandbox 属性禁用了全屏，该值就是 false，但你仍可能看到 fullscreenElement 非 null（极少见，多因嵌套权限混乱）。
立即学习“Java免费学习笔记（深入）”；
- 监听状态变化应使用
document.addEventListener('fullscreenchange', handler)，而不是轮询 - 退出全屏统一用
document.exitFullscreen()（同样返回 Promise） - 不要依赖
screen.orientation判断全屏，它只管设备方向，和全屏 API 无关
全屏样式适配靠 :fullscreen 伪类，不是 .fullscreen 类名或 full-screen 属性
CSS 中启用全屏专属样式，必须用标准伪类 :fullscreen（无连字符，小写）。它会匹配当前 fullscreenElement 及其所有后代。浏览器前缀版本如 :-webkit-full-screen、:-moz-full-screen 已逐步淘汰，现代项目只需写一次标准形式。
注意：该伪类不触发重排，但会覆盖原有样式，比如你设了 body { margin: 0 }，在全屏下可能失效，需显式写 body:fullscreen { margin: 0 }。另外，:fullscreen 不支持在 Shadow DOM 内部生效（除非开启 delegatesFocus 并透出样式）。
- 避免用
!important强制覆盖，优先提高 CSS 选择器权重 - 视频全屏时，
<video>自带浏览器控件样式，:fullscreen只影响自定义 UI 层 - 移动端 Safari 对
:fullscreen支持有限，部分样式可能被忽略
退出全屏失败？检查 document.exitFullscreen() 的 Promise 和触发时机
document.exitFullscreen() 返回 Promise，但它的 resolve 并不保证界面已退出 —— 它只是表示退出请求已发出。真正完成以 fullscreenchange 事件为准。常见失败场景包括：
- 调用时页面不在全屏状态（Promise resolve，但无实际效果）
- 页面被其他脚本或插件抢占了全屏控制权（如视频播放器自己管理全屏）
- 在非主线程（如 Web Worker）中调用，直接抛
DOMException - 从 iframe 内调用，且父页面未设置
allow="fullscreen"属性
button.addEventListener('click', () => {
if (document.fullscreenElement) {
document.exitFullscreen()
.catch(err => console.warn('Exit failed:', err));
} else {
appDiv.requestFullscreen()
.catch(err => console.warn('Enter failed:', err));
}
});
最易被忽略的是：全屏 API 在 iOS Safari 上完全不可用（仅支持原生视频全屏按钮），且 Android WebView 若未配置 WebSettings.setJavaScriptEnabled(true) 和 setMediaPlaybackRequiresUserGesture(false)，也可能静默失败。
