广告弹窗在移动端错位或溢出，根本原因是 top: 50%; left: 50%; transform: translate(-50%, -50%) 在 ios safari 缩放场景及部分 android webview 中计算失准；应改用 position: fixed; inset: 0; margin: auto; 并设 max-width: 90vw; max-height: 90vh;，同时添加 touch-action: manipulation; 防 300ms 延迟。
广告弹窗为什么在移动端总是错位或溢出
根本原因是用了 top: 50%; left: 50%; transform: translate(-50%, -50%) 这套“经典居中法”。它在 iOS Safari 某些 zoom 或字体缩放场景下会计算失准，导致弹窗偏左上或遮挡底部操作区。更麻烦的是，部分 Android WebView 对 transform 的渲染精度也偏低。
实际做法是放弃纯 CSS 居中，改用 JS 动态计算 + inset: 0; margin: auto; 组合：
- 给弹窗容器设
position: fixed; inset: 0; margin: auto;（现代浏览器支持良好，Safari 15.4+、Chrome 89+） - 同时限制最大宽高：
max-width: 90vw; max-height: 90vh;，避免在窄屏上横向溢出或内容被截 - 移动端必须加
touch-action: manipulation;到弹窗根元素，否则点击关闭按钮可能触发 300ms 延迟，用户要连点两下 - 若需兼容旧版 Safari（window.innerWidth 和
window.innerHeight，再手动设置left和top
如何让广告弹窗在小屏上自动缩放不压字
广告弹窗不是展示型组件，而是转化节点——文字太小、按钮太窄，直接导致点击率归零。响应式缩放不能只靠 vw，得结合视口约束与内容弹性。
关键控制点：
- 标题字号用
clamp(1.25rem, 4vw, 1.75rem)：最小 20px，最大 28px，中间随视口线性过渡 - 正文行高固定为
1.5，但字体大小用clamp(0.875rem, 3.2vw, 1.125rem)，确保小屏可读、大屏不空洞 - 按钮高度设为
min(56px, 8vh)，既满足 WCAG 触控最小尺寸，又防在超长屏上撑太高 - 禁用
user-scalable=no在 viewport meta 中——强制缩放会破坏弹窗内文字排版，且违反可访问性要求
广告弹窗的 z-index 和层叠冲突怎么解
广告弹窗常被导航栏、sticky header、第三方广告位盖住，尤其在 SPA 或 CMS 嵌入页里。问题不在“设多大”，而在“谁先渲染、谁后接管”。
真实项目中有效的层级策略：
- 弹窗遮罩层（overlay）用
z-index: 9998，内容层用z-index: 9999，**严格避开框架默认值**（如 Bootstrap 是 1050，Ant Design 是 1000） - 如果页面已有
position: sticky导航栏，它很可能用了z-index: 100或更高——此时仅提高弹窗 z-index 不够，必须确认其父容器没触发新的层叠上下文（即检查是否有opacity 、<code>transform、will-change等） - 在 iOS Safari 上，
z-index对position: fixed元素有时失效，可靠方案是把弹窗 DOM 插入到最末尾，绕过嵌套容器的层叠干扰 - 不要依赖 CSS 预处理器变量统一管理 z-index——广告弹窗的优先级必须独立于 UI 组件库，否则上线后容易被覆盖
响应式广告弹窗最易被忽略的可访问性陷阱
很多团队做完视觉适配就上线，结果屏幕阅读器用户打不开、键盘 Tab 无法进入弹窗、关闭后焦点丢失——这些不是“优化项”，是合规红线。
必须做的三件事：
- 弹窗打开时，立即执行
document.body.setAttribute('aria-hidden', 'true')，并保存原scrollY；关闭时恢复scrollY并移除aria-hidden -
showModal()不适合广告弹窗——它强制焦点锁定，但首次触发必须由用户点击发起，否则报错Failed to execute 'showModal' on 'HTMLDialogElement'；老老实实用div+aria-modal="true"+ 手动焦点管理 - 关闭按钮必须是
<button type="button"></button>，不能用<a href="#"></a>；且需监听Escape键、点击遮罩、以及click外部区域——但别在遮罩click里调event.stopPropagation()，这会同时废掉键盘关闭和屏幕阅读器的交互路径
真正难的不是“做出来”，是让弹窗在 320px 宽的 iPhone SE 上不卡顿、不闪跳、不丢焦点，同时又扛得住 Chrome DevTools 里模拟的 3G 节流和 4x 屏幕缩放——这些细节不写死在代码里，上线后就会变成不可复现的偶发 Bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
