全屏 api 通过 javascript 的 element.requestfullscreen() 方法触发，须由用户交互启动，现代浏览器统一使用该标准方法，旧版需兼容前缀；需错误捕获、监听 fullscreenchange 事件，并用 :fullscreen 伪类定制样式；移动端限制多，ios 基本无效，推荐 video 属性或 pwa standalone 模式实现沉浸体验。
全屏 API 的基本调用方式
网页全屏不是靠 HTML 标签或 CSS 属性直接“设置”的，而是通过 JavaScript 调用 Element.requestFullscreen() 方法触发浏览器原生全屏行为。必须由用户交互（如点击）触发，否则会被浏览器静默拒绝。
-
document.documentElement.requestFullscreen()是最常用写法，让整个页面进入全屏 - 不能在页面加载时自动调用，否则会抛出
DOMException: Document not focused或直接静默失败 - 需处理不同浏览器前缀：旧版 Chrome/Safari 用
webkitRequestFullscreen()，Firefox 早期用mozRequestFullScreen()，但现代标准已统一为requestFullscreen()
如何安全地检测和调用全屏 API
直接调用 requestFullscreen() 可能因兼容性或权限问题失败，必须加错误捕获和降级逻辑。
- 先检查元素是否支持全屏：
if (element.requestFullscreen)，再调用 - 用
try...catch捕获TypeError或SecurityError（比如非用户手势触发） - 监听
fullscreenchange事件来响应状态切换，注意事件触发时document.fullscreenElement可能为null（退出全屏） - 退出全屏统一用
document.exitFullscreen()，不要调用元素上的方法
CSS 中控制全屏下的样式表现
全屏后页面结构不变，但浏览器会为 :fullscreen 伪类添加默认样式（比如移除 margin、设为 flex 容器），实际开发中常需主动干预。
- 用
:fullscreen选择器覆盖默认样式，例如重置背景色、隐藏滚动条：body:fullscreen { background: #000; overflow: hidden; } - 注意旧版 Safari 需要
::-webkit-full-screen，Firefox 用:moz-full-screen，但现代写法优先用标准伪类 - 全屏状态下
position: fixed元素可能被截断，建议改用position: absolute并配合inset: 0
移动端全屏的现实限制
在 iOS Safari 和多数安卓 WebView 中，requestFullscreen() 无法真正隐藏地址栏和系统 UI，所谓“全屏”只是内容拉伸填充可视区域。
- iOS 上该 API 基本无效，即使调用成功，也仅等效于
viewport缩放控制 - Android Chrome 支持较好，但需确保页面未启用
user-scalable=no，否则缩放锁定会干扰全屏渲染 - 如果目标是沉浸式视频播放，应优先使用
<video></video>的webkit-playsinline+allow="fullscreen"属性组合，而非手动调用 API
真正跨平台可靠的“全屏体验”，往往得结合 PWA 的 display: standalone 清单配置，而不是依赖 requestFullscreen() —— 后者本质是临时视图切换，不是应用模式切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
