全屏沉浸式广告必须由用户手势触发，目标元素需可见且为video/iframe/canvas等合法标签；iOS需用CSS模拟全屏并手动管理状态与退出逻辑。
全屏沉浸式广告不能靠自动触发实现，必须由用户点击等合法手势启动；iOS Safari 对非 <video></video> 或 <iframe></iframe> 元素直接拒绝全屏，纯 HTML 广告需用 CSS 模拟 + JS 控制状态。
怎么让广告容器正确调用 requestFullscreen()
浏览器只允许对具体 DOM 元素调用全屏 API，不能对 document.body 或 document.documentElement 直接调用（多数会静默失败）。目标元素必须已渲染、可见、未被 display: none 或 visibility: hidden 隐藏。
- 给广告外层容器加明确
id="ad-fullscreen"，比依赖 class 更稳定 - 按钮 click 事件里同步调用，不能放在
setTimeout、fetch回调或scroll事件中 - 必须检查元素是否真实存在于 DOM：用
document.getElementById('ad-fullscreen')获取后判空，再调用 - 兼容写法要覆盖
requestFullscreen、webkitRequestFullscreen、msRequestFullscreen
为什么点按钮没反应？常见拦截原因
不是代码写错，而是浏览器策略卡死。最常踩的坑是：
- 页面运行在 HTTP 环境下 → Safari 和新版 Chrome 直接禁用 Fullscreen API
- 广告容器被父级设置了
overflow: hidden或固定宽高 → 全屏后视觉上仍被裁剪 - iOS Safari 中，目标元素不是
<video></video>、带allowfullscreen的<iframe></iframe>或<canvas></canvas>→ 调用无报错但无效果 - 事件监听绑在了子元素（比如按钮里的
<span></span>）上，而该子元素没触发原生 click 流 → 浏览器不认为这是有效用户手势
如何模拟“沉浸式”体验（尤其在 iOS 上）
iOS 不允许普通 div 全屏，所以得退一步：用 CSS 把广告撑满视口 + JavaScript 控制交互流，再配合 :fullscreen 伪类或手动 class 切换隐藏干扰 UI。
立即学习“前端免费学习笔记（深入）”；
- 广告容器用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; - 监听
fullscreenchange事件，进入时加document.body.classList.add('ad-fullscreen-active')，退出时移除 - 用
.ad-fullscreen-active .header, .ad-fullscreen-active .nav { display: none; }主动收起页面其他部分 - 退出按钮必须显式提供，不能只依赖 ESC —— iOS 不响应键盘退出，且
document.exitFullscreen()在部分 WebView 中无效
移动端横屏与退出后状态重置
全屏退出后，很多开发者忘了重置状态，导致页面布局错乱或滚动异常。
- 在
fullscreenchange回调里，除了切 class，还要重置document.body.style.overflow（全屏时常设为hidden） - 若用了
screen.orientation.lock('landscape')，退出时必须调用screen.orientation.unlock()，否则后续旋转失效 - 某些 Android WebView 退出后
document.fullscreenElement仍为null，但 body 残留 class 或 scrollTop 异常 → 建议用布尔变量isAdFullscreen手动跟踪状态 - 不要依赖
:fullscreen伪类做关键样式控制，它在旧 Safari 和 IE 中不可用，且不支持嵌套选择器
真正难的不是让广告“看起来全屏”，而是确保每次退出后页面恢复如初——滚动位置、焦点、样式、第三方 SDK 状态都得主动清理，这点最容易被跳过。
