移动端页面显示太小的根本原因是浏览器未按设备真实宽度渲染，而是默认以980px宽度渲染后缩放；必须在head最顶部添加，且不可动态插入或重复声明。
移动端页面显示太小，90% 的情况不是 CSS 没写好，而是浏览器根本没按设备真实宽度渲染——它默认用 980px 宽度画完再缩放，文字和按钮自然糊成一团。加对 viewport 标签是第一道、也是最关键的防线。
viewport 必须同时写 width=device-width 和 initial-scale=1.0
只写 width=device-width 或只写 initial-scale=1.0 都不行。iOS Safari 会直接忽略前者、或在内容溢出时强行放弃后者。必须合写成：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个标签必须放在 最顶部，早于任何 CSS/JS。动态插入（比如 JS 创建后 append）在 iOS Safari 中完全无效；放在 里也无效，DevTools 可能显示它，但浏览器根本不解析。
- 重复声明时，只取第一个，后面的被静默丢弃
- 如果 CMS 或框架模板里已有一条 viewport，你再加一条，等于白加
- 测试时别只看 DevTools 的 computed 值，用「Capture screenshot」看真实渲染宽度，才能确认是否真按 device-width 渲染
写了 viewport 还是小？大概率是 CSS 把视口撑爆了
initial-scale=1.0 不是魔法开关。只要页面里存在宽度超过视口的内容，iOS Safari 就会强制缩小整个页面来保证“用户能看清”，哪怕你写了十遍 initial-scale=1.0。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 常见撑爆源：
width: 1200px的容器、white-space: nowrap的长文本（比如未格式化的 JSON）、min-width: 500px的卡片、flex 子项没设flex-shrink: 1 - 浮动元素未清除也会导致父容器意外变宽，进而触发缩放
- 真机截全屏图比模拟器更可靠——很多问题在 Chrome DevTools 模拟器里根本看不出来
别碰 user-scalable=no 和 maximum-scale=1.0
这两个参数在 2026 年已基本失效：iOS 16+ 和 Android Chrome（2025 起）弱化甚至跳过它们。更严重的是，它们直接违反 WCAG 2.1，会让 iOS「更大字体」等辅助功能彻底失效。
-
user-scalable=no在部分 WebView 中直接被忽略，调试时毫无报错提示，只会在某天新机型上线后突然不生效 - 真正需要防误触的场景（如地图、游戏画布），该用
touch-action: manipulation：保留单指滚动和辅助缩放，仅禁双指缩放和长按 - 如果非得限制缩放范围，
maximum-scale=2.0这类宽松值尚可留着，但maximum-scale=1.0已无实际意义且有害
字号和布局别硬写 px，优先用 rem + vw 驱动根字号
viewport 解决了“初始渲染太小”，但小屏上 font-size: 16px 依然难读，大屏上又可能过大。纯 vw 写字号风险高，稳妥做法是用 vw 控制 html 的 font-size，再用 rem 写所有尺寸：
html { font-size: calc(100vw / 3.75); }
前提是设计稿逻辑宽度为 375px（如 iPhone 6）。但 Safari 对 calc(100vw / 3.75) 这类带除法的运算兼容不稳定，更推荐分段写：
@media (max-width: 320px) { html { font-size: 85px; } }-
html { font-size: 26.67vw; }（对应 375px 设计稿） @media (min-width: 640px) { html { font-size: 170px; } }
注意：根字号拉高后，body 必须重置字号，否则正文会跟着狂涨——body { font-size: 0.16rem; } 是最常用解法（还原浏览器默认 16px）。
