手机端布局错乱主因是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，它实际映射的物理像素数不可控——这才是糊的根本原因。
Flex/Grid 在旧版 Android WebView 渲染错位
Android 4.4–6.0 自带 WebView 对 flex 支持不全，常见表现：子项不换行、justify-content 失效、grid-template-columns: repeat(auto-fit, ...) 完全不解析。
实操建议：
- 加厂商前缀：比如
display: -webkit-flex、-webkit-justify-content: center - 用 Autoprefixer 编译时明确设
browsers: ["Android >= 4.4"] - 关键布局降级：对老机型用
float+calc()或 JavaScript 动态计算宽度
别只看 Chrome DevTools 的模拟——真机连 Android 5.1 的 WebView 都可能把 flex: 1 当成 0 处理。
图片未适配导致拉伸、模糊或加载失败
手机端常见问题：图片宽高写死 width: 300px，横屏时溢出；或用 
srcset，高清屏加载低分图。
必须做两件事：
- 给所有
style="max-width:90%"，防止撑破容器 - 用
srcset+sizes提供多分辨率源：@@##@@
- 慎用背景图
background-image：某些低端机不支持background-size: cover的精确裁剪
最隐蔽的坑：CDN 返回的图片 MIME 类型错误（如返回 text/plain），会导致 iOS Safari 直接不渲染——用开发者工具 Network 面板检查 Content-Type 字段。
