JavaScript Fullscreen API是浏览器原生接口，用于让指定元素占据整个屏幕，必须由用户手势触发，需处理兼容前缀、监听fullscreenchange/error事件，并注意HTTPS环境及iframe allow="fullscreen"限制。
JavaScript 的 Fullscreen API 是浏览器原生提供的接口，用于让指定元素（比如视频、画布或整个页面）占据用户整个屏幕。它不是简单“拉伸样式”，而是触发系统级全屏模式，受严格安全策略约束——必须由用户手势（如 click、keydown）触发，否则静默失败。
确认支持并检查可用性
使用前先判断当前环境是否允许全屏：
- 用 document.fullscreenEnabled（或兼容写法
document.webkitFullscreenEnabled || document.mozFullScreenEnabled）检测 API 是否启用 - 若返回 false，可能是页面被 iframe 嵌入但未声明
allow="fullscreen"，或浏览器不支持（如 iOS Safari 完全禁用） - 注意：即使 API 存在，也可能因策略限制而不可用（例如 HTTPS 环境下才允许，HTTP 页面多数现代浏览器已拒绝）
让元素进入全屏
调用目标元素的 requestFullscreen() 方法，并处理浏览器前缀：
- 优先尝试标准方法：
element.requestFullscreen() - 降级支持旧版浏览器：
element.webkitRequestFullscreen()（Chrome/Safari）、element.mozRequestFullScreen()（Firefox）、element.msRequestFullscreen()（IE11） - 务必绑定在用户操作上，例如按钮点击事件；直接在脚本加载时调用会失败
- 推荐作用于具体容器（如
<div id="player">），而非盲目调用document.documentElement，避免整页失控
退出全屏与状态监听
退出操作是全局行为，统一调用 document.exitFullscreen()：
立即学习“Java免费学习笔记（深入）”；
- 同样需兼容前缀：
document.webkitExitFullscreen()、document.mozCancelFullScreen()等 - 建议先判断是否处于全屏状态：
if (document.fullscreenElement)再执行退出，避免无意义调用 - 监听 fullscreenchange 事件获取状态变化（进入/退出都会触发），通过
document.fullscreenElement判断当前全屏的是哪个元素 - 监听 fullscreenerror 事件捕获失败原因，例如权限被拒、非手势触发等，便于提示用户
CSS 适配与显示一致性
不同浏览器对全屏元素的默认渲染不同：
- Firefox 自动加
width: 100%; height: 100%，铺满屏幕 - Chrome/Safari 默认居中显示原始尺寸，四周黑边
- 为统一效果，添加 CSS 规则：
:fullscreen video { width: 100%; height: 100%; object-fit: contain; }:-webkit-full-screen video { width: 100%; height: 100%; }:-moz-full-screen video { width: 100%; height: 100%; }
