全屏 API 非 Bootstrap 自带，需调用原生 requestFullscreen()；须用户手势触发、支持主流浏览器但行为有差异；需 try...catch 捕获错误、监听 fullscreenchange 更新状态与样式。
全屏 API 不是 Bootstrap 自带的，得自己调用 requestFullscreen()
bootstrap 本身没有封装全屏功能，它只提供按钮样式和事件绑定基础。真正触发全屏的是浏览器原生的 element.requestfullscreen() 方法。这个 api 在 chrome、firefox、edge、safari（16.4+）都支持，但行为细节有差异——比如 safari 要求用户手势触发，且不支持对 <iframe> 或某些嵌套元素调用。
- 必须由用户点击等**同步手势事件**触发，不能在异步回调（如
setTimeout、fetch.then）里调用，否则会静默失败 - 推荐作用于
document.documentElement（即整个页面），避免因父容器overflow: hidden或transform导致渲染异常 - 移动端 Safari 对全屏支持有限，部分机型会忽略或仅放大视口，不真正进入全屏模式
按钮绑定 click 后怎么安全调用全屏
直接写 document.documentElement.requestFullscreen() 看似简单，但不同浏览器前缀已废弃（webkitRequestFullscreen 等），现代写法只需标准方法 + 错误捕获。关键是要处理拒绝情况，比如用户点了“否”或策略阻止（如 iframe sandbox 未开权限）。
- 始终用
try...catch包裹，捕获TypeError（如不支持）或SecurityError（如非手势触发） - 检查
document.fullscreenElement是否为null再调用，避免重复请求导致报错 - 按钮文案建议动态切换，比如从“全屏”变成“退出全屏”，靠监听
fullscreenchange事件更新
document.getElementById('fullscreen-btn').addEventListener('click', () => {
if (!document.fullscreenElement) {
try {
document.documentElement.requestFullscreen();
} catch (err) {
console.warn('全屏请求失败:', err.name);
}
} else {
document.exitFullscreen();
}
});
退出全屏后样式没恢复？注意 CSS 的 :fullscreen 伪类影响
全屏状态下，浏览器会自动给全屏元素（这里是 html）添加 :fullscreen 伪类，你写的 html:fullscreen { ... } 会生效。但很多人忘了：退出后，如果之前手动加了 body { overflow: hidden } 或强制设置了 width: 100vw，这些不会自动还原。
- 不要依赖
:fullscreen做核心布局，它只适合微调（如隐藏导航栏、加大字体） - 如果进全屏时修改了 body 样式，务必在
fullscreenchange事件里同步清理，例如重置overflow、padding、margin - 某些 CSS 框架（包括 Bootstrap）的 modal、toast 组件可能在全屏下定位错乱，因为它们依赖
window.innerWidth，而全屏时该值未必变化——需手动监听并重绘
为什么点按钮没反应？常见被忽略的三个条件
不是代码写错，而是环境卡住了。90% 的“点不动”问题出在这三处：
-
<iframe>嵌入页面时，必须加allow="fullscreen"属性，否则 Chrome/Firefox 直接禁用 API - 页面运行在
file://协议下（双击打开 HTML 文件），现代浏览器默认禁用全屏 API，必须起本地服务（如npx serve） - 按钮用了
preventDefault()或父元素有pointer-events: none，导致 click 事件没传到 handler
真遇到没反应，先打开控制台，执行 document.documentElement.requestFullscreen() 手动试一次，看报什么错——比猜快得多。
全屏不是状态切换，是浏览器级权限操作，每次都要过策略校验。写完别只测 Chrome，至少再开 Firefox 和 Safari 点一下，它们拒绝的理由往往不一样。
