设计稿标注 88px 的按钮，在 iPhone SE 上撑破一行，在安卓大屏上又小得像颗米粒；模拟器里严丝合缝的页面，到了微信内置浏览器底部按钮被手势条吃掉一半。移动端适配之所以难，不在于方案少，而在于屏幕宽度、设备像素比、浏览器 UI 高度这三件事同时在变。
📐viewport 别只写一行 width=device-width
移动端适配的地基是这行 meta。缺了它，浏览器会拿 980px 的桌面布局视口去渲染，页面整体缩小，字小得要用放大镜看。
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">viewport-fit=cover 是最容易被漏掉的一项。不写它，页面默认缩在安全区内，env(safe-area-inset-*) 取到的值恒为 0，全面屏机型的底部适配等于白做。至于 user-scalable=no，iOS 10 之后的 Safari 会直接无视，无障碍上也吃亏，运营活动页可以保留，内容型页面建议放开。
📏rem 与 vw 不是二选一，混着用才稳
纯 rem 方案（JS 动态算根字号）兼容性最好，但依赖脚本，首屏存在字体突变闪烁；纯 vw 方案不用 JS，服务端渲染无闪烁，代价是数值不直观，且无法设上下限。实际项目里的稳妥打法是：用 vw 定根字号，用 rem 写尺寸。
html { font-size: calc(100vw / 3.75); } /* 375 基准：1rem = 100px 设计稿值 */
@media (min-width: 560px) { html { font-size: 42.66px; } } /* 平板/大屏封顶，防无限拉伸 */
.page { max-width: 750px; margin: 0 auto; }工程化交给构建插件：新项目用 postcss-px-to-viewport-8-plugin，老项目沿用 amfe-flexible + postcss-pxtorem，开发时照着设计稿写 px，构建自动换算。有一处细节常被忽略——第三方 UI 库有自己的尺寸基准，若设计稿按 750 出图，开发统一折算到 375 体系再写，否则组件和业务页会一半大一半小。
🧵1px 边框发胖，用伪元素缩放解决
DPR 为 2 或 3 时，CSS 的 1px 会被渲染成 2~3 个物理像素，视觉上又粗又糊。最稳的写法是伪元素画线再单向缩放：
.hairline { position: relative; }
.hairline::after {
content: ""; position: absolute; left: 0; top: 0;
width: 100%; height: 1px; background: #e5e5e5;
transform-origin: 0 0; pointer-events: none;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.hairline::after { transform: scaleY(0.5); }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
.hairline::after { transform: scaleY(0.3333); }
}带圆角的边框要把圆角写成 2 倍再缩放，否则四角会变形；单纯一条分割线用 box-shadow: 0 1px 0 #e5e5e5 更省事，代价是边缘略虚。
🛡️刘海屏与底部手势条：安全区适配
顶部灵动岛、底部 Home Indicator 会直接压住内容。开了 viewport-fit=cover 之后，再用环境变量把内容顶出来：
.footer-btn {
padding-bottom: constant(safe-area-inset-bottom); /* 旧版 iOS */
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: max(12px, env(safe-area-inset-bottom)); /* 兜底呼吸空间 */
}env() 的第二个参数是回退值，在不支持的浏览器里退化成 0，不会破坏既有布局。注意 constant() 必须写在 env() 之前，旧版 iOS 只认前者。
📱100vh 不准，换成动态视口单位
移动浏览器的地址栏会随滚动收展，而 100vh 固定等于”UI 收起时的最大高度”，于是地址栏还在时，底部按钮就被挤出可视区。规范给出的三个新单位正好对症：
-
svh：UI 全展开时的最小高度，关键按钮用它，永不被遮； -
lvh：UI 全收起时的最大高度，沉浸式背景用它； -
dvh：随 UI 状态实时变化，大多数场景用它。
.hero { height: 100vh; height: 100dvh; } /* 前一行做老浏览器降级 */iOS 15.4、Chrome 108 以上是分水岭，低于这个版本需要 JS 兜底：读 window.innerHeight * 0.01 写入 --vh，再 height: calc(var(--vh) * 100)，监听 resize 与 orientationchange 更新。同一套布局里不要混用 vh 和 dvh，否则调试时很难判断哪层在生效。
⌨️软键盘弹起，底栏乱飞
键盘压缩的是视觉视口，position: fixed; bottom: 0 的定位基准失效，按钮要么被顶到键盘上方，要么直接消失。四层修法从简到繁：给底栏容器加安全区 padding；改用 position: sticky 配外层滚动容器；监听 window.visualViewport 的 resize 与 scroll，用 visualViewport.height、offsetTop 手动定位；检测视口高度骤减超过 150px 判定键盘弹出，临时把底栏改成流式布局。另外，iOS 本身会自动滚动让输入框可见，若再叠加一次 scrollIntoView，两者打架会产生肉眼可见的跳动。
🚫弹窗滚动穿透与点击异常
弹层打开后背景跟着滚，单纯给 body 加 overflow: hidden 在 iOS 上无效。可行做法是记录当前 scrollTop，给 body 加 position: fixed; top: -滚动值，关闭时还原并滚回原位。现代浏览器还可以给弹层内部容器加 overscroll-behavior: contain，一行代码切断滚动链。点击态发蓝、双击被误判缩放，则靠这两行解决：
* { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }在正确设置了 width=device-width 的页面里，300ms 点击延迟早已被浏览器移除，不必再引 FastClick。
🖼️图片模糊与流量浪费
按 2x/3x 出图并用 srcset 交给浏览器挑，是清晰度与流量的平衡点：
<img src="banner@1x.jpg"
srcset="banner@2x.jpg 2x, banner@3x.jpg 3x"
loading="lazy" decoding="async" alt="活动banner">图标类资源优先走 SVG 或 iconfont，天然免适配；位图再叠 image-set() 处理 CSS 背景图。
🔤字号被浏览器强行放大
部分安卓 WebView 会限制最小字号为 12px，vw 缩到极窄屏时正文可能小于这个值，浏览器一干预，整段排版就错位。正文与辅助说明保留 px 或用 clamp() 夹紧：font-size: clamp(14px, 4vw, 18px)。iOS 横屏时字号自动放大，用 -webkit-text-size-adjust: 100% 压住。
🔧验收清单：别只信模拟器
模拟器复现不了视口差异。上架前至少真机过三关：iOS Safari、Android Chrome、微信内置浏览器，重点看地址栏收展时的布局跳动、键盘弹出时的底栏位置、DPR 为 3 的机型上边框粗细。远程调试用 vConsole 看 window.devicePixelRatio、document.documentElement.clientWidth 与 visualViewport.height 三个值，多数适配问题都能靠这三个数定位。
结尾
移动端适配没有一劳永逸的银弹，本质是对”宽度、像素密度、可变视口高度”三件事分别给出兜底：宽度交给 rem/vw 混合体系，像素密度交给伪元素缩放与多倍图，视口高度交给 dvh 与安全区变量。把这三层各自封成 Sass mixin 或构建插件，后续项目直接复用，页面在 iPhone SE 到折叠屏之间就不会再出现”大屏显小、小屏溢出”的尴尬。上线前留一轮真机回归，比上线后追着bug修要省事得多。🎯