原生 <dialog> 在移动端需设 max-width: 90vw、max-height: 90vh、overflow-y: auto 防溢出；iOS Safari 16.3 及以下需双路监听点击区域与 close 事件确保关闭逻辑可靠。
dialog 在移动端不居中、溢出屏幕怎么办
直接用 <dialog> 在手机上大概率会撑满全屏、文字被截断、按钮点不到——这不是 bug，是它默认没做响应式约束。原生 dialog 的尺寸由浏览器决定，桌面端尚可，移动端必须手动加限制。
关键做法是给 dialog 元素加 max-width 和 max-height，同时禁用缩放干扰：
-
max-width: 90vw（不是100vw，留出安全边距） -
max-height: 90vh（防止内容过长时遮挡系统状态栏） -
overflow-y: auto（让内部滚动，而不是整页滚动） - 避免设
width: 100%或height: 100%，这会破坏居中逻辑
示例 CSS：
dialog {
max-width: 90vw;
max-height: 90vh;
overflow-y: auto;
}
点击 backdrop 不关闭、ESC 失效的 Safari 兼容陷阱
iOS Safari 直到 16.4 才完整支持 showModal() 和 ::backdrop 点击行为；15.4–16.3 版本中，点击遮罩层时 e.target 常为 body 而非 dialog，导致监听失效。
立即学习“前端免费学习笔记（深入）”；
不能只靠 dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) —— 它在旧版 Safari 下几乎不触发。
稳妥方案是双路监听：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 监听
click事件，判断点击坐标是否落在dialog的getBoundingClientRect()区域内 - 同时监听
close事件，用e.preventDefault()拦住默认关闭后，再手动控制状态（比如配合 loading 中禁止关闭） - 对 iOS dialog-polyfill（需引入 JS + CSS）
注意：别在 click 监听里无条件调用 dialog.close()，否则点内部按钮也会关窗。
表单提交后页面刷新、回车键不关闭 dialog
在 <dialog> 里放 <form> 是高频场景，但默认提交会整页 reload，看起来像“弹窗闪退”；用户按 Enter 提交表单，也不会触发 dialog.close()。
最简解是给 form 加 method="dialog" 属性：
<form method="dialog"> <input name="confirm" value="yes"> <button>确认</button> </form>
这样提交后自动调用 dialog.close()，且把表单值写入 dialog.returnValue。但注意：
-
method="dialog"不支持异步请求（如fetch），需异步时必须e.preventDefault()+ 手动dialog.close() - 按钮别漏写
type="button"，否则默认是submit，点一次就提交两次 - 表单内第一个可聚焦元素（如
input）会被自动autofocus，若不需要，显式加autofocus到目标控件
焦点管理失控、Tab 键穿透到背景页
调用 showModal() 后焦点应锁在 dialog 内，但若内部没有可聚焦元素（比如只有纯文本和 <div>），焦点会回到 body，导致 Tab 键继续切换背景按钮——用户根本感知不到弹窗已打开。
必须确保 dialog 内至少有一个可聚焦子元素，并显式标记 autofocus：
- 推荐用
<button autofocus>或<input autofocus> - 避免只靠 CSS
tabindex="0"，部分 Safari 版本对非原生可聚焦元素的 autofocus 支持不稳定 - 如果要用自定义组件（如封装的
<my-input>），确保其内部有focus()方法并主动调用 - 关闭后焦点默认返回触发
showModal()的元素，若该元素已被移除，需手动triggerEl.focus()
复杂点在于：移动端软键盘唤起后，dialog 可能被顶出可视区，此时仅靠 CSS 无法修复，得监听 resize 或 focusin 动态调整 scrollIntoView()。
