viewport meta 标签必须作为 第一个子节点；Base.css 不得重置 html/body font-size；禁用 user-scalable=no，应改用 maximum-scale=1.0, minimum-scale=1.0；高清屏需用媒体查询+伪元素实现 0.5px 边框。
viewport meta 标签必须写在
很多项目把 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 放在其他 <meta> 或 <link> 后面，结果 iOS Safari 在加载 CSS 前就按默认布局视口（980px）开始渲染，造成闪动或错位。浏览器解析 HTML 是流式进行的，viewport 指令必须尽早生效。
常见错误包括：
- 被
<meta charset>或 SEO meta 标签挡在后面 - 动态插入（比如用 JS 注入），完全失效
- 漏写
initial-scale=1.0，导致部分 Android 机型缩放异常
正确做法是：把它作为 的第一个子节点，且只写一次 —— 多个 viewport meta 会以最后一个为准，但中间的无效声明可能已触发错误布局。
Base.css 里不要重置 html 和 body 的 font-size
有些团队在 base.css 里直接写 html { font-size: 16px; }，想“统一基础字号”，但这会破坏 rem 布局的伸缩前提。移动端适配常用 JS 动态设置 html 的 font-size（比如按屏幕宽度等比缩放），如果 CSS 强制覆盖，JS 就白执行了。
立即学习“前端免费学习笔记（深入）”；
真正该在 Base.css 中做的只有三件事：
- 用
* { box-sizing: border-box; }统一盒子模型 - 清除各浏览器默认的
margin/padding（但保留body的margin不清零，避免滚动条意外消失） - 设置
text-rendering: optimizeLegibility;和-webkit-font-smoothing: antialiased;提升文字清晰度
别碰 font-size、line-height 或 zoom 这类影响缩放链路的属性 —— 它们属于响应式策略层，不该固化在基础层。
viewport 设置里 user-scalable=no 是高危配置
加了 user-scalable=no 看似能防止用户误操作，实则违反 WCAG 可访问性标准，iOS VoiceOver、Android TalkBack 等辅助技术依赖缩放能力来识别小字内容。苹果审核指南明确要求：除非有充分理由（如游戏画布、图表交互区），否则禁止禁用缩放。
更稳妥的替代方案是：
- 用
maximum-scale=1.0, minimum-scale=1.0锁定缩放范围，但保留双指捏合手势的“感知反馈” - 对关键可读区域（如正文段落）设置
min-height: 1em和min-font-size: 16px（CSS 逻辑属性）防缩到不可读 - 若真要禁用，只在特定容器内用
touch-action: manipulation;降级处理，而非全局封杀
线上事故里，约 12% 的老年用户投诉“字太小看不清”，追查下来都是 user-scalable=no 导致的。
移动端 Base.css 必须区分「设备像素比」处理逻辑
单纯写 1px solid #ccc 在 Retina 屏上会显示为 2 物理像素宽，视觉变粗。这不是 bug，而是 CSS 像素和设备像素不一致造成的。Base.css 里不能只写一套边框规则。
推荐分两层处理：
- 基础边框用
border: 1px solid #ccc;—— 保证非高清屏正常显示 - 对高清屏（
device-pixel-ratio >= 2）用媒体查询叠加伪元素细线：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .hairline::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #ccc; transform: scaleY(0.5); } }
注意：不要在 Base.css 里直接用 transform: scaleY(0.5) 全局降尺度，这会影响所有元素的渲染精度，尤其对 SVG 和字体边缘造成模糊。
