移动端适配首要解决viewport设置，必须在head中声明width=device-width等属性；rem与vw混用易致字体异常，推荐clamp()或em/ch方案；touch-action:manipulation可消除300ms点击延迟；旧Android WebView需降级Flex/Grid布局。
viewport 设置不对，页面在手机上缩成一团或文字小得看不清——这是移动端适配最常卡住的第一步。
为什么 meta name="viewport" 不是可选项，而是强制开关
没有它，移动端浏览器会以桌面宽度（通常是 980px）渲染页面，再整体缩小显示，导致交互失灵、字体模糊、点击错位。iOS Safari 和 Android Chrome 都依赖这个声明来启用“移动优先”的布局逻辑。
- 必须写在
里，且不能被 JS 动态插入（抓取时不可见） - 推荐写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
user-scalable=no要谨慎：WCAG 可访问性要求允许用户缩放，除非有强业务理由（如绘图类应用），否则建议去掉 - 不要用
width=375或具体像素值——不同机型device-width差异大，硬写会崩在折叠屏或平板上
rem 与 vw 混用时字体突然变小或溢出屏幕
很多人用 rem 做响应式字体，再叠加 vw 做视口级缩放，结果在 iPhone 14 Pro Max 上字大到撑出容器，在小屏安卓机上又细得看不见。根本原因是两者计算基准冲突：rem 依赖根元素 font-size，而 vw 直接按视口宽度算，没做边界控制。
- 纯
vw风险高：100vw 在横屏下可能远超预期，建议用clamp(16px, 4.5vw, 20px)锁定上下限 - 用
rem的话，别在 JS 里动态改document.documentElement.style.fontSize后又叠加 CSS calc，容易触发重排抖动 - 更稳的方案：
font-size: 100%保持继承，用em或ch做局部缩放，避免全局根字号扰动
touch-action: manipulation 被忽略，按钮点击延迟 300ms
移动端浏览器为兼容双击缩放，会对 click 事件加 300ms 延迟。很多团队只加了 fastclick 库，却没意识到现代 CSS 已原生支持绕过它。
- 在所有可点击容器（
button、a、带role="button"的div）上加touch-action: manipulation - 注意：如果同时用了
touch-action: none（比如轮播图容器），子元素的manipulation会被父级覆盖，需显式重置 - 不支持 IE，但所有主流安卓/iOS 浏览器均支持，比 JS 库更轻量、无兼容层开销
Flex/Grid 在旧版 Android WebView 中错位或换行异常
Android 4.4–6.0 的系统 WebView 对 Flex 布局支持极不稳定，flex-wrap: wrap 可能完全失效，align-items: center 在某些机型上变成 top 对齐。
立即学习“前端免费学习笔记（深入）”；
- 检测手段：用
@supports (display: flex) and (flex-wrap: wrap)包裹关键样式，fallback 到float或inline-block - 避免用
flex: 1占满剩余空间——旧内核对flex-basis解析错误，改用flex: 1 1 auto - Grid 更危险：Android 6.0 以下基本不支持，必须降级；
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))这类写法在旧环境直接退化为单列
transform: translateZ(0) 强制硬件加速——它在部分低端安卓机上反而引发闪烁，而在 iOS 上早已无意义。适配永远是在真实设备矩阵里做取舍，不是堆补丁。 
