全屏需对主内容容器调用兼容性 requestfullscreen()，且必须在用户点击事件中触发；ios safari 仅支持 video 或带 allowfullscreen 的 iframe 全屏，纯 html 内容需用 css 模拟。
点击按钮触发全屏需要调用 requestFullscreen()
浏览器原生全屏 API 不作用于整个网页，而是针对某个具体 DOM 元素（比如 main、#content 或 .container）。直接对 document.body 调用会失败或被忽略，因为多数浏览器禁止对 body 或 html 全屏。必须选中你要展示的主内容容器元素，再调用其 requestFullscreen() 方法。
常见错误现象：Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. —— 这说明你没在用户点击等合法交互事件里调用，比如写在 setTimeout 里、或在加载后自动触发，都会被拒绝。
- 确保按钮绑定的是原生
click事件（不能是自定义事件或冒泡中途被 stop） - 目标元素必须已存在于 DOM 中（不要在
DOMContentLoaded之前就尝试调用） - 推荐用
id="main-content"显式标记主内容区，比依赖 class 或标签更稳定
兼容性处理要覆盖 webkitRequestFullscreen 和 msRequestFullscreen
虽然现代 Chrome/Firefox/Edge 已统一支持标准 requestFullscreen()，但 Safari（尤其旧版 iOS）仍需 webkitRequestFullscreen()，IE11 则只认 msRequestFullscreen()。不加兼容层，按钮在部分设备上完全无响应。
实操建议：封装一个安全调用函数，避免重复判断：
function enterFullscreen(el) {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
}
}
调用时传入真实 DOM 元素，例如：enterFullscreen(document.getElementById('main-content'))。
退出全屏不能靠刷新页面，得监听 fullscreenchange 并调用 exitFullscreen()
用户按 ESC 或点击退出按钮后，页面不会自动恢复布局，CSS 伪类 :fullscreen 依然生效，且 document.fullscreenElement 可能为 null。若想实现“再次点击按钮退出”，必须检测当前是否已全屏：
- 检查
document.fullscreenElement是否为你的目标元素（注意不是布尔值） - 退出需调用
document.exitFullscreen()（同样有webkitExitFullscreen/msExitFullscreen兼容写法） - 别忘了给全屏状态下的主内容区加 CSS 重置，比如移除 margin/padding、设
width: 100vw; height: 100vh;，否则可能留白或滚动条异常
移动端 Safari 的限制很实在：不支持 allowfullscreen 以外的元素全屏
iOS Safari 对全屏控制极其严格——即使你正确调用了 requestFullscreen()，如果目标元素不是 <video></video> 或带 allowfullscreen 属性的 iframe，它会静默失败，不报错也不生效。这意味着纯 HTML 内容区在 iPhone 上基本无法全屏。
可行折中方案：
- 改用 CSS + viewport 模拟全屏：点击后给
#main-content添加 class，配合position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;，并禁用 body 滚动 - 若内容含视频，优先让
<video></video>全屏，再通过 JS 同步显示关联文字区域 - 务必在点击前检测
document.fullscreenEnabled，iOS 上它常为false，可提前隐藏原生全屏按钮
真正跨端可靠的全屏体验，往往不是靠 API，而是靠对限制的诚实应对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
