viewport标签必须写对且放最前：需置于最顶部、content值为width=device-width, initial-scale=1.0、全局仅出现一次；加user-scalable=no违反可访问性，仅限Kiosk场景。
viewport 标签必须写对且放最前
移动端仪表盘白屏、文字极小、横向滚动，90% 是因为 缺失或写错。它不是“锦上添花”，而是浏览器渲染的强制开关。
必须满足三点：
• 写在 最顶部，早于所有 CSS 和 JS
• content 值只能是 width=device-width, initial-scale=1.0，不能拼错（如 device_width 或 width=375）
• 全局只出现一次，重复会导致 Safari 闪屏重排
加 user-scalable=no 会违反 WCAG 可访问性要求，除非是 Kiosk 固定设备场景。
用 grid-template-areas 定义语义化区域，别碰行列线编号
硬写 grid-column: 2 / 4 或 grid-row: 3 在移动端极易失控——加一个指标卡片、改一行高度，整块布局就偏移，调试时得反复数网格线，还容易漏掉 span 冲突。
正确做法：
• 容器设 display: grid，子元素用 grid-area 匹配命名区域（如 "header"、"live-metrics"）
• 区域名带业务语义，拒绝 "area-1" 这类编号
• 新增模块只需在 grid-template-areas 字符串里加个词，其他区域完全不受影响
• 移动端覆盖时，grid-template-rows 和 grid-template-columns 必须同步重写，否则未定义维度会回退默认行为，高度失控
卡片等高不能靠 flex: 1 拉伸内容
用 flex: 1 强制拉伸卡片主体，会导致文字行高失真、按钮被压扁、SVG 图标比例错乱——这不是“等高”，是“强行撑开”。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
真正稳的方案是“容器截断 + 内容自适应”：
• 卡片设 display: flex; flex-direction: column;
• 主体内容区加 min-height: 0（防止 flex 项溢出拉伸）
• 数值部分用 放指标名（如 P95 延迟）， 放数值（如 247ms）
• 单位和状态徽标（↑↓）与数字同级包裹，别塞进浮动容器；用 margin-left 控制间距更稳
触控热区和字体缩放必须按物理尺寸算
车载或平板横屏下，CSS 像素密度远高于桌面。设 min-width: 320px 的卡片，在 1280px 宽度下只排 4 列，但实际触控区域可能不足 24mm × 24mm（低于 ISO 推荐最小值）。
关键调整：
• 关键操作卡片（如“刷新”“导出”）加 flex-basis: 12rem，用 rem 而非 px，适配不同 DPI 下的物理尺寸缩放
• 字体用 clamp(1rem, 4vw, 1.5rem) 替代固定 px，避免小屏文字糊成一片
• 断点统一用 em 单位（如 @media (min-width: 80em)），而非像素值，否则系统级字体缩放会让断点失效
• 禁用 flex-direction: column-reverse——多数 WebView 不支持，会破坏方向盘旋钮或语音焦点流
最容易被忽略的不是代码怎么写，而是内容层级本身：再好的媒体查询也救不了堆砌在 HTML 里的无序指标。移动端仪表盘的体验瓶颈，往往卡在语义缺失、触控热区不足、字体缩放断裂这三处，而不是动画帧率或图表库选型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
