移动端 dialog 不居中或溢出需手动加约束：设 max-width/max-height 防溢出，用 clamp() 动态 margin，禁用 transform 父容器；ios 点击关闭失效时兜底 escape 键和坐标判断；锁定 html font-size 为 16px，单位转 px 避免缩放错乱；降级时用 inert+aria-modal+焦点管理，或引入 dialog-polyfill。
dialog 在移动端不居中或溢出怎么办
直接写 <dialog></dialog> 后调用 showModal()，在 iOS Safari 16.4 以下、部分 Android WebView 或高 DPI 车载屏上，常出现偏左/偏上、内容被截断、按钮不可点等问题——这不是代码写错了，是原生 <dialog></dialog> 对 viewport 缩放和物理尺寸缺乏响应式适配。
必须手动加约束：
-
dialog { max-width: 90vw; max-height: 90vh; }防止宽屏下横向溢出、小屏下纵向撑满 -
dialog { margin: clamp(1rem, 5vh, 2rem); }替代固定margin: 2rem，兼顾触控热区与缩放变化 - 禁用
transform父容器：若<dialog></dialog>上级有transform: scale()或will-change，Safari 可能完全不渲染它，需提级到直接子级
点击遮罩关闭 dialog 在 iOS 上失效的修复
iOS Safari 15.4–16.3 存在事件冒泡异常：e.target === dialog 恒为 false，导致 dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) 失效。
安全兜底方案：
- 监听
keydown捕获Escape键（所有版本都支持） - 对 backdrop 点击做坐标判断：
if (e.clientX ，再触发 <code>close() - 永远不要只依赖
click事件关窗；“取消”按钮必须显式绑定dialog.close()
font-size 缩放导致 dialog 布局错乱
鸿蒙车机、iOS“显示大小”设置、Android 系统字体缩放，会让 rem 和 em 计算失准，<dialog></dialog> 的 padding、border-radius 可能压缩成 1px 甚至归零。
关键处理点：
- 重置所有单位为
px或rem，但根字号必须锁定：html { font-size: 16px !important; }（避免被车机 UI 框架覆盖） -
dialog { padding: 1rem; border-radius: 0.5rem; }→ 改为padding: 16px; border-radius: 8px;，消除缩放干扰 - 用
@media (min-width: 80em)替代@media (min-width: 1280px)，确保断点随字体缩放动态调整
兼容旧版 WebView 必须降级时的焦点陷阱
检测到 typeof HTMLDialogElement === 'undefined' 或 !('showModal' in HTMLDialogElement.prototype) 时，不能简单用 div[role="dialog"] 替代——车载系统或旧 WebView 会忽略 aria-modal="true"，导致语音导航卡死、Tab 键穿透到背景页。
真正可用的降级逻辑：
- 插入
<div class="fallback-dialog" aria-modal="true" aria-labelledby="dlg-title">，并同步设置 <code>inert属性封锁背景 DOM - 手动管理焦点流：
dialogEl.focus()后，监听focusin拦截外部焦点进入 - 用
dialog.returnValue的语义等价物（如自定义data-return-value）保持 API 一致
最省事但有限制的方案：直接引入 dialog-polyfill，它会在不支持的环境自动 patch showModal() 并接管焦点与 backdrop 行为——不过要注意，它不解决车载 HMI 对 ARIA 语义的硬性要求，仅适用于普通移动网页。
