全屏api是浏览器原生接口，非bootstrap插件；需通过document.documentelement.requestfullscreen()同步触发，配合try/catch处理错误，并监听fullscreenchange事件还原样式与状态。
全屏 API 不是 Bootstrap 插件，别装错包
Bootstrap 本身没有提供全屏插件，requestFullscreen() 是浏览器原生 API，不是第三方库或 Bootstrap 封装功能。所谓“Bootstrap 全屏插件”大多是社区封装的简易 wrapper（比如用 bootstrap-fullscreen 这类非官方 npm 包），但它们只是对原生 API 做了 try/catch 和事件绑定包装，没解决核心限制。
常见误区：以为加个 data-bs-toggle="fullscreen" 就能像 modal 那样开箱即用——实际并不存在这个 data 属性，Bootstrap 官方文档里也查不到。
- 所有“全屏插件”都绕不开用户手势触发约束，异步调用（如
setTimeout、fetch.then）必静默失败 - 插件无法绕过 iframe sandbox 限制、移动端 Safari 的策略拦截等安全机制
- 多数插件不处理
:fullscreen伪类样式残留，退出后 body 滚动/缩放/overflow 往往没还原 - 如果项目已用 Bootstrap 5.2+，直接手写几行 JS 调用原生 API，比引入一个 2KB 的“插件”更轻、更可控
点击按钮安全调用 requestFullscreen() 的实操要点
必须由 click 同步触发，且目标元素要选对。最稳妥的是 document.documentElement，而不是某个 div 或 modal-content。
- 不要用
document.body.requestFullscreen()：Safari 会拒绝，部分安卓 WebView 也不认 - 务必检查状态再调用：
if (!document.fullscreenElement)，避免重复请求报TypeError - 必须包裹
try...catch，捕获SecurityError（非手势）、TypeError（不支持）、NotAllowedError（用户拒接） - 按钮文案建议动态切换，靠监听
fullscreenchange事件更新，例如：btn.textContent = document.fullscreenElement ? '退出全屏' : '全屏'
示例代码片段：
<pre class="brush:php;toolbar:false;">const btn = document.getElementById('fullscreen-btn');
btn.addEventListener('click', () => {
if (!document.fullscreenElement) {
try {
document.documentElement.requestFullscreen();
} catch (err) {
console.warn('全屏请求被阻止:', err.name);
}
} else {
document.exitFullscreen();
}
});
全屏后样式没恢复？重点盯这三处
退出全屏时，浏览器不会自动还原你手动改过的 CSS。最常出问题的是以下三个地方：
body { overflow: hidden }：全屏时加的，退出后得在 <code>fullscreenchange里重置为auto或继承值-
html, body { height: 100% }或min-height: 100vh：若全屏期间临时覆盖了高度行为，退出后需清除内联 style 或切换 class -
:fullscreen伪类影响：比如写了html:fullscreen { padding: 0; }，退出后 padding 不会自动回来，得靠 JS 清除或用 class 控制
推荐做法：用一个 class 如 is-fullscreen 统一控制样式变更，进全屏时 document.documentElement.classList.add('is-fullscreen')，退出时 remove，比直接操作 style 更可靠。
移动端和 Safari 的现实限制
iOS Safari 对全屏支持非常有限——它不真正进入全屏模式，只是放大视口（类似 pinch-to-zoom），且不触发 fullscreenchange 事件。Android Chrome 虽支持，但某些定制 ROM（如华为 EMUI）会拦截 requestFullscreen() 并静默失败。
- 不要依赖全屏实现关键交互（如视频播放控件、表单提交确认），它随时可能不可用
- 全屏按钮应有 fallback：比如降级为“放大内容区”（通过 transform scale 或 viewport 缩放）
- 测试时务必真机验证，DevTools 的 device emulation 无法模拟 Safari 的全屏策略
- 若内容含
<iframe></iframe>，需确保其sandbox属性包含allow-fullscreen，否则会被直接拒绝
真正难搞的不是怎么点进去，而是怎么让退出后一切回到原点——尤其是那些你顺手加的 !important 和内联 style。
