原生 alert() 无法响应式适配，因其非 HTML 元素、不参与文档流、不受 CSS 和视口控制；必须用语义化自定义模态框（div + aria-modal + viewport meta），配合 max-width、rem 字体、44px 触控区、焦点管理等实现真适配。
原生 alert() 对话框无法自适应，也不能定制样式或响应屏幕尺寸——它由浏览器强制渲染，完全脱离 CSS 控制。想实现真正适配不同设备的警告提示，必须放弃 alert()，改用自定义模态框。
为什么 alert() 不能做响应式？
它不是 HTML 元素，不参与文档流，也不受视口、媒体查询、rem 或 vw 影响。在 iPhone 上点开可能文字小到看不清，Android 平板上按钮位置错乱，且无法关闭、无法聚焦、无法键盘操作——这是系统级弹窗，不是网页的一部分。
用 div + aria-modal 实现可适配警告框
核心是语义化结构 + 移动优先 CSS + 视口控制：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
必须存在，否则模态框在手机上会缩成一团 - 警告框容器设
max-width: 90vw，避免在小屏溢出；用min-width: 280px防止过窄 - 文字大小统一用
rem（如font-size: 1.125rem），配合根字体动态调整更稳妥 - 按钮高度用
min-height: 44px（iOS 推荐最小触控区域），内边距用em或rem保持比例 - 加
role="alertdialog"和aria-labelledby，确保读屏器能正确识别
小屏下必须处理的三个细节
很多人只写了个居中 div 就以为完成了，但真机测试常翻车：
- 遮罩层（
.modal-overlay）要用position: fixed+inset: 0，避免滚动时内容位移 - 警告框本身禁用
transform: translate(-50%, -50%)做居中——在旧版 Safari 中可能触发渲染 bug，改用top: 50%; left: 50%; transform: translate(-50%, -50%)更稳 - 小屏竖向空间紧张时，内容区要设
max-height: 70vh+overflow-y: auto，防止文字被截断
最易被忽略的是焦点管理：打开模态框后，焦点必须落到第一个可交互元素（如确认按钮），关闭后焦点需返回触发它的按钮——否则对键盘和辅助技术用户完全不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
