移动端弹窗居中用 transform: translate(-50%, -50%) 而非 margin: auto，因后者依赖明确宽高且受缩放/动态内容影响易失效，而 transform 基于自身尺寸更稳定；必须同时设置 position: fixed、top: 50%; left: 50% 和 transform: translate(-50%, -50%) 才能精准居中。
移动端弹窗居中为什么用 transform: translate(-50%, -50%) 而不是 margin: auto
因为移动端视口缩放、字体调整、动态内容加载都会让弹窗宽高不可预知，margin: auto 在 position: absolute 下只对块级元素且有明确宽高的情况有效，而弹窗常是 max-width 或 fit-content，容易偏移或失效。iOS Safari 在 zoom 场景下还会让 top: 50%; left: 50% 偏离中心，但 transform 是基于自身尺寸计算的，更稳定。
必须同时写三句：position: fixed（脱离滚动影响）、top: 50%; left: 50%（锚点拉到视口中心）、transform: translate(-50%, -50%)（反向偏移自身一半）。漏掉任意一个，弹窗就会卡在右下角或顶部。
dialog 在移动端要不要用？兼容性怎么兜底
能用就用——showModal() 自动禁滚动、处理键盘（Esc/Tab）、生成 ::backdrop，比手写遮罩少写 80% 的 JS 和 CSS。但 Safari 15.4+ 才完整支持，旧版 iOS 或安卓 WebView 可能只支持 show() 且无 backdrop。
兜底方案不是“重写一套”，而是降级逻辑：
立即学习“前端免费学习笔记（深入）”；
- 先检测
'showModal' in HTMLDialogElement.prototype - 支持时直接
modal.showModal() - 不支持时：手动设
modal.show()+modal.setAttribute('inert', '')+ 给body加style="position: fixed; top: -${scrollY}px" - 别忘了还原滚动位置，用
document.documentElement.scrollTop和document.body.scrollTop双读取
遮罩层点击关闭弹窗，为什么点按钮也关了
事件冒泡没拦住。很多人监听遮罩的 click，但用户点的是弹窗里的 × 按钮，这个按钮是遮罩的子元素，click 事件会一路冒泡到遮罩上。
正确判断方式只有一条：if (e.target === backdropEl)。不要用 e.target.classList.contains('backdrop')，也不要 backdropEl.contains(e.target)——后者会让点输入框、下拉菜单都触发关闭。
如果用原生 dialog，遮罩是 ::backdrop，无法直接绑定事件，得监听 dialog 元素本身，再检查 e.target === e.currentTarget 是否成立（即点击发生在 dialog 边界内，而非内部子节点）。
移动端防穿透和滚动锁定最容易漏哪几行代码
不是加 overflow: hidden 就完事。漏掉下面任意一行，用户一滑屏幕，背景就跟着动，或者弹窗关了页面卡在顶部：
- 打开前存滚动位置：
const savedY = window.scrollY - 设
body为position: fixed并带负top偏移，否则 iOS 会重置滚动条 - 关闭后不仅要恢复
overflow，还得window.scrollTo(0, savedY)，且要等 reflow 后执行（可加setTimeout(() => ..., 0)） - 给弹窗容器加
touch-action: manipulation，否则 Safari 点击延迟会导致“点两下才关”
真正复杂的是滚动状态同步——不是技术难点，而是所有细节必须同时生效，缺一不可。
