如何使用HTML5实现Fullscreen API进行全屏切换及开启全屏模式？

本文共计692个文字，预计阅读时间需要3分钟。

确保由用户手动触发（例如：

• 正确姿势：绑定在按钮的 onclick 或 addEventListener('click', ...) 里
• 移动端注意：部分 iOS Safari 要求同时监听 touchend，且不能有 preventDefault() 干扰
• requestFullscreen() 返回 Promise，记得用 .catch() 捕获失败（比如用户点了“拒绝全屏”）

不同浏览器的全屏 API 前缀怎么兼容

老版本 Chrome、Firefox、Safari 曾各自实现私有方法，现在虽已统一为标准 requestFullscreen()，但实际项目仍需兜底——尤其要支持到 Chrome 69 之前、Firefox 63 之前、Safari 12.1 之前的环境。

• 优先检测并调用 element.requestFullscreen()
• fallback 到 element.webkitRequestFullscreen()（Safari / 旧 Chrome）
• 再 fallback 到 element.mozRequestFullScreen()（旧 Firefox）
• IE11 用 element.msRequestFullscreen()，注意它不返回 Promise，是同步行为

退出全屏后状态怎么安全重置

别只依赖 document.exitFullscreen()，它只对当前全屏元素生效，且失败时不抛错；更可靠的是监听 fullscreenchange 事件，在回调里检查 document.fullscreenElement 是否为 null 来确认真正退出。

• document.fullscreenElement 是判断当前是否处于全屏的唯一可信依据（不是布尔值，是 DOM 元素或 null）
• 退出前建议先保存原元素宽高、滚动位置等状态，避免全屏时样式重排导致退出后布局跳变
• 某些安卓 WebView 中，fullscreenchange 可能延迟触发或丢失，可加 setTimeout 双保险检测

全屏下 CSS 样式为什么没生效

全屏后浏览器会自动给全屏元素加一层伪类 :fullscreen（Chrome/Firefox）或 ::-webkit-full-screen（Safari），原有 CSS 选择器大多失效，必须显式重写。

立即学习“前端免费学习笔记（深入）”；

• 必须用 div:fullscreen { width: 100vw; height: 100vh; } 这类规则覆盖默认缩放/边距
• Safari 对 ::-webkit-full-screen 支持更严格，不允许在里面用 position: fixed，否则子元素可能错位
• 全屏元素内若含 iframe，需确保其 allow="fullscreen" 属性存在，否则无法在其中触发嵌套全屏

全屏不是简单调个函数就完事，真正卡住人的往往是那个没被打印出来的 Promise reject，或者 Safari 里少写的那个伪类前缀。