手机端布局错乱主因是viewport缺失、CSS用px导致高DPI屏显示异常、Flex/Grid在旧Android WebView兼容性差、图片未适配。需添加viewport标签、改用rem/em单位、加厂商前缀、设max-width:100%及srcset。
手机端 viewport 设置缺失导致布局错乱
多数 HTML 在手机上渲染异常，根源是没声明视口（viewport）。浏览器默认按桌面宽度（如 980px）渲染，再缩放显示，文字变小、按钮挤在一起、响应式失效。
解决方法很简单：在 中加入标准 viewport meta 标签：
-
width=device-width让页面宽度匹配设备物理宽度，不是固定值 -
initial-scale=1.0禁止初始缩放，避免文字过小 -
user-scalable=no可选，防用户误双击放大（但可访问性需权衡）
漏掉这行，max-width: 100% 或 flex 布局都救不回来——因为整个渲染上下文就错了。
CSS 单位用 px 导致字体/间距在高 DPI 屏上糊或过小
手机屏幕像素密度（DPI）远高于桌面，硬写 font-size: 14px 在 iPhone 或安卓旗舰机上会显得极小、发虚。
立即学习“前端免费学习笔记（深入）”；
推荐改用相对单位：
- 用
rem配合根字体动态设置（例如通过 JS 读取window.devicePixelRatio调整document.documentElement.style.fontSize） - 简单项目直接用
em或%，保证缩放一致性 - 媒体查询中优先用
min-width: 375px这类逻辑像素（CSS pixels），而非物理像素
注意：px 在 CSS 中本就是“参考像素”，但若未配合 viewport，它实际映射的物理像素数不可控——这才是糊的根本原因。
