移动端优化需主动干预，包括添加viewport标签、禁用touch高亮与延迟、设置触摸目标≥44px、字体≥16px、校准字体渲染及行高。
直接用 CSS 框架不等于移动端优化，多数框架默认只是“响应式就绪”，但真正在手机上表现良好，得主动干预关键行为。
viewport meta 标签必须手动加
几乎所有 CSS 框架（如 Bootstrap、Tailwind、Bulma）都依赖正确的视口缩放控制。没它，max-width: 100% 和 rem 基准都会失效，页面要么缩得太小，要么横向滚动。
必须在 <head> 中显式声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意：user-scalable=no 要慎用——仅限 Web App 场景；普通网站建议去掉，否则影响可访问性。
立即学习“前端免费学习笔记（深入）”；
禁用默认 touch 高亮与 tap 延迟
移动端点击元素时，iOS/Android 默认有灰色高亮和约 300ms 延迟，既影响体验，又干扰按钮反馈逻辑。
通用修复方式（适用于所有框架）：
- 移除点击高亮：
* { -webkit-tap-highlight-color: transparent; } - 消除延迟（推荐用
touch-action）：button, a, input, select, textarea { touch-action: manipulation; }
不要依赖框架自带的 .btn 类去覆盖这些，它们通常不处理底层交互行为。
慎用框架的“响应式断点”做真实适配
像 Bootstrap 的 col-md-6 或 Tailwind 的 md:flex 是按设备宽度分层，但手机实际体验取决于 DPR（设备像素比）、字体渲染精度、触摸目标大小，而非单纯 768px。
关键实操建议：
- 触摸目标至少
44px × 44px：用min-height/min-width显式设置，别只靠 padding - 文字不能小于
16px（iOS 可读性下限），rem基准设为16px后，避免写text-xs类在按钮里 - 断点值别硬套框架默认值：比如把
sm:...从640px改成480px，更贴近小屏安卓机物理宽度
字体抗锯齿与行高在 iOS 上特别敏感
iOS Safari 对 -webkit-font-smoothing 和 line-height 极其敏感，框架默认样式常导致文字发虚或行距过紧。
推荐统一加在根级：
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
body {
font-size: 16px;
}如果用了自定义字体（如 woff2），务必检查 @font-face 是否包含 font-display: swap，否则首屏文字会长时间空白。
移动端优化不是开箱即用的配置开关，而是对 touch 行为、视觉密度、字体渲染这三块的持续校准。框架只提供栅格和工具类，真正的“适配”发生在你覆盖它的默认、调整它的断点、重写它的交互反馈那一刻。
