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










