最方便的全屏切换方式是通过用户点击按钮调用requestfullscreen()，需满足手势触发、元素已渲染、非body/documentelement、iframe含allow="fullscreen"等条件；状态判断唯一依据是document.fullscreenelement，退出须用document.exitfullscreen()并判空，且注意safari延迟与移动端兼容性。
最方便的全屏切换方式，是用 requestFullscreen() + 用户点击按钮，而不是靠 F11 或自动触发。 它可控、可样式化、能响应状态变化，且现代浏览器（Chrome 71+、Firefox 64+、Edge 79+、Safari 15.4+）已统一支持标准 API，无需手动写一堆前缀判断——除非你还得兼容 2020 年前的老版本。
button 点击触发 requestFullscreen() 必须满足的条件
这个操作看着简单，但失败率极高，几乎全是因违反浏览器安全策略：
- 必须在用户手势（
click、touchend）回调里调用，不能放在setTimeout、fetch.then或 autoplay 后面 - 目标元素必须已渲染且在 DOM 中（
offsetParent !== null），不能是display: none或visibility: hidden - 不能对
document.body或document.documentElement直接调用（Safari 会拒绝；应优先选具体容器，如<main id="app"></main>） - 若页面嵌在
<iframe></iframe>里，需确保 iframe 有allow="fullscreen"属性，否则静默失败
document.fullscreenElement 是唯一可靠的状态判断依据
别用 document.isFullscreen（根本不存在），也别靠布尔值猜。它返回当前全屏的 DOM 元素，退出后为 null（不是 undefined）：
if (document.fullscreenElement === container) {
button.textContent = '退出全屏';
} else {
button.textContent = '全屏显示';
}
注意两点：
- 监听
fullscreenchange事件必须绑定在document上，且该事件不带参数，只能靠读document.fullscreenElement判断 - Safari 触发
fullscreenchange有微小延迟，建议在 handler 里加Promise.resolve().then(...)再读状态，避免取到旧值
退出全屏必须调用 document.exitFullscreen()，且要判空
直接调 document.exitFullscreen() 不报错，但若当前没全屏，它会返回一个 rejected Promise（NotFoundError）。所以安全写法是：
if (document.fullscreenElement) {
document.exitFullscreen().catch(e => console.warn('退出失败:', e.name));
}
容易被忽略的关键点：
- 退出主体要和进入主体一致：如果用
videoEl.requestFullscreen()进入，最好也用videoEl.exitFullscreen()（虽然多数浏览器接受document.exitFullscreen()，但 Safari 偶尔会卡住） - 移动端没有 Esc 键，必须提供显式退出按钮；WebView 场景下，部分安卓低版本甚至不支持
exitFullscreen()，得靠监听fullscreenchange后手动隐藏 UI 来“模拟”退出 -
exitFullscreen()同样受用户手势限制——不能在异步回调里调，否则静默失败
真正麻烦的从来不是调哪个方法，而是状态同步和边界处理：用户按 Esc 退出时你收不到 keydown，iframe 里缺 allow 属性时连错误都不抛，Safari 对 fullscreenchange 的时机又不守约。这些细节不提前踩一遍，上线后第一波反馈就是“点了没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
