alert()在移动端完全不可用，因其阻塞JS执行、无遮罩、不支持样式与安全区域、缺乏可访问性；应改用dialog元素或降级div方案，并严格遵循移动端无障碍规范。
原生 alert() 在手机端无法真正适配，必须替换为自定义弹层——它不支持样式控制、遮罩穿透、焦点管理、安全区域和可访问性，iOS 上还会强制暂停 JS 执行、打断表单流程。
为什么 alert() 在移动端完全不可用
它不是“有点丑”，而是行为级失效：
- 调用后整个页面 JS 被阻塞，用户无法切换 App、无法返回上一页，iOS 甚至会中断输入法状态
- 没有遮罩层，背后内容仍可滚动或点击（尤其在微信内置浏览器中）
- 文字大小、按钮尺寸、间距全由系统决定，
font-size和padding完全无效 - 不响应
safe-area-inset-top，刘海屏/挖孔屏下提示条会被裁切 - 屏幕阅读器无法识别其语义，
role="alert"和aria-live完全缺失
用 dialog 元素实现轻量级替代方案
现代浏览器（Chrome 98+、Safari 15.4+、Firefox 97+）已原生支持 <dialog></dialog>，它比手写弹层更可靠：
- 自动获得模态行为：焦点锁、ESC 关闭、点击 backdrop 关闭（需显式调用
showModal()） - 天然支持
inert属性，背后内容自动失焦、不可交互 - 可配合
@media (prefers-reduced-motion)控制动画，避免低端机卡顿 - 用
position: fixed+inset: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0精准贴边
示例关键 CSS：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
dialog {
margin: 0;
padding: 20px;
border: none;
border-radius: 8px;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
max-width: 90vw;
width: min(480px, 90vw);
}
dialog::backdrop {
background-color: rgba(0,0,0,0.5);
}
@media (max-width: 480px) {
dialog { padding: 16px; }
}
兼容老 iOS 必须降级到 div + 手动逻辑
Safari 15.3 及更早版本不支持 dialog，且无法 polyfill 行为。此时必须用 <div role="dialog" aria-modal="true"> 并手动处理：
<ul>
<li>用 <code>tabindex="-1" 让弹层可聚焦，首次打开后立即 .focus()
keydown 捕获 ESC，并 preventDefault() 防止触发页面滚动pointer-events: none + inert（如有）或 JS 遍历禁用所有可交互子元素min-height: 100vh 的遮罩层，避免键盘弹出时遮罩塌陷aria-labelledby 指向标题 ID，否则 VoiceOver 不会朗读内容字体与触摸目标必须满足移动端硬指标
即使弹层结构正确，细节不到位照样失败：
- 正文
font-size至少16px，iOS Safari 会强制放大小于该值的文本，导致布局跳变 - 确认按钮高度不能靠
line-height勉强撑开，必须设min-height: 44px（WCAG 触摸最小尺寸） - 按钮内边距用
padding-block: 12px而非padding: 12px 20px，避免横竖屏切换时错位 - 禁用
-webkit-text-size-adjust: 100%，防止用户系统字体放大后弹层文字溢出 - 所有按钮必须有
role="button"和tabindex="0"，否则 TalkBack 无法识别
最易被忽略的是：弹层关闭后，焦点必须同步回到触发它的元素上。否则屏幕阅读器用户会迷失在 DOM 中，且不符合 WCAG 2.1 Focus Not Lost 原则。
