rem字体异常源于根字号未设边界，需三步解决：①限制font-size在12–24px间；②禁用iOS自动缩放（-webkit-text-size-adjust:100%）；③结合clamp()与viewport前置声明保障响应与可访问性。
rem 方案在极小或极大屏幕下出现字体异常，本质是根元素 font-size 的动态计算逻辑未做边界约束，导致单位换算后字体过小（如 8px 难以识别）或过大（如 48px 挤占布局），同时叠加了浏览器自动缩放、用户辅助设置、DPR 变化等干扰。解决关键在于“可控缩放 + 安全兜底 + 渲染隔离”三步落地。
控制根字号的上下限，避免极端值失真
动态设置 html { font-size } 时，不能只按比例缩放（如 screenWidth / 750 * 100），必须加最小值和最大值限制：
- 最小值建议设为 12px（iOS Safari 最小可读字体下限，低于此易被强制放大或渲染模糊）
- 最大值建议设为 24px（平板或折叠屏横屏时防文字撑爆容器）
- 示例 JS 计算逻辑：
const base = Math.min(Math.max(screenWidth / 750 * 100, 12), 24);<br>document.documentElement.style.fontSize = base + 'px';
关闭 iOS Safari 自动字体调整，防止二次放大
iOS Safari 在窄容器中会主动放大 内文本（尤其 <input>、<button></button>），与 rem 值冲突。必须显式禁用该行为：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在
App.vue或全局 CSS 中写：body, input, textarea, select, button { -webkit-text-size-adjust: 100%; } - 注意：
text-size-adjust: none已被 iOS 17+ 废弃，且部分安卓浏览器会禁用用户缩放，不可用 - 该样式需在所有组件样式前加载，否则可能被覆盖
适配用户系统级字体偏好，兼顾可访问性
当用户在系统设置中调大「更大字体」或开启「粗体文本」时，rem 值虽未变，但实际渲染尺寸会被放大，造成布局错位。稳妥做法是：
- 检测
window.matchMedia('(prefers-reduced-motion: reduce)')和document.documentElement.style.fontSize是否被 UA 覆盖 - 对关键文字容器（如标题、正文段落）补充
max-font-size: 1.2rem（需配合clamp()或媒体查询） - 更现代方案：用
clamp(1rem, 2.5vw, 1.4rem)替代纯 rem，让字体在小屏保底、大屏封顶、中间弹性过渡
确保 viewport 声明前置且完整，阻断初始缩放干扰
若 <meta name="viewport"> 缺失或位置靠后，移动端浏览器会以约 980px 宽度渲染并缩放，此时 1rem 对应的物理像素已失准：
- 必须在
最顶部、任何 CSS/JS 加载前写入：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
user-scalable=no非强制，但能防止用户误操作放大破坏 rem 基准；如需支持缩放，至少保留initial-scale=1.0 - 禁止用 JS 动态注入该 meta 标签——iOS Safari 会忽略
