Fullscreen API需通过Element.requestFullscreen()调用并由用户手势触发，返回Promise；兼容写法需检测webkit/moz/ms前缀；退出用document.exitFullscreen()；监听fullscreenchange/error事件；CSS用:fullscreen伪类适配。
Fullscreen API 的基本调用方式
现代浏览器中，让任意元素进入全屏不能靠 CSS 或属性声明，必须调用 Element.requestFullscreen() 方法。这个方法返回一个 Promise，成功后元素会占据整个屏幕（不包括浏览器 UI），失败则抛出错误，比如用户未主动触发、元素不可见或被 sandboxed iframe 隔离。
常见错误现象：TypeError: element.requestFullscreen is not a function —— 多因浏览器前缀未处理或运行在非安全上下文（HTTP 页面不支持）；NotAllowedError —— 最常见于未由用户手势（如 click、keydown）触发。
- 必须在用户事件回调中调用，例如
button.addEventListener('click', () => el.requestFullscreen()) - 确保元素已挂载到 DOM，且
display !== 'none'、visibility !== 'hidden' - HTTPS 环境下才允许调用；本地
file://协议多数浏览器拒绝
跨浏览器兼容性写法
虽然主流浏览器已支持无前缀的 requestFullscreen，但 Safari 15.4 之前仍需 webkitRequestFullscreen，Firefox 早期版本用 mozRequestFullScreen（注意大小写）。手动检测并调用最匹配的方法比依赖 polyfill 更轻量、可控。
实操建议：封装一个兼容函数，避免重复判断：
立即学习“前端免费学习笔记（深入）”；
function enterFullscreen(el) {
if (el.requestFullscreen) return el.requestFullscreen();
if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
if (el.mozRequestFullScreen) return el.mozRequestFullScreen();
if (el.msRequestFullscreen) return el.msRequestFullscreen();
throw new Error('Fullscreen API not supported');
}
注意：msRequestFullscreen 是 IE11 专用，已淘汰；mozRequestFullScreen 中的 Full 是小写，拼错就失效。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
退出全屏与监听状态变化
退出全屏不是调用元素的方法，而是调用 document.exitFullscreen()。它同样返回 Promise，且只在当前有全屏元素时有效；若无全屏状态，会 resolve 空值，不会报错。
监听全屏切换要用两个全局事件：fullscreenchange（状态变更时触发）和 fullscreenerror（请求失败时触发）。它们都绑定在 document 上，不是目标元素。
-
document.fullscreenElement返回当前全屏的元素，为null表示未全屏 - 不要监听
resize判断是否退出全屏——延迟高、误判多 -
fullscreenchange触发时，document.fullscreenElement已更新，可直接读取
样式适配与常见陷阱
进入全屏后，元素会自动获得 :fullscreen 伪类（Chrome/Firefox/Safari 支持），但 Safari 仍需 :-webkit-full-screen。CSS 里用它调整布局、隐藏控件或修改背景更可靠，而不是靠 JS 动态加 class。
容易被忽略的点：
- 全屏模式下，
<video>元素默认显示原生控制栏，需显式设controls="false"才能自定义 - 滚动行为异常？全屏元素的父容器若设了
overflow: hidden，可能截断内容，应检查层级渲染 - 移动端 Safari 不支持非
<video>元素全屏（即使调用成功，也仅放大视口，不真正覆盖系统 UI）
真正在生产环境用好 Fullscreen API，关键不在调用本身，而在对触发时机、错误分支、退出路径和移动端限制的完整兜底。尤其要注意：iOS 上几乎无法让普通 div 进入真正意义上的全屏。
