viewport必须写全且只写一次，rem基准须在HTML解析阶段用内联style设定，老iOS中flex子元素min-width会被无视——这三处是导致自适应失效的核心硬伤。
viewport 标签写错，页面就永远缩在左上角，rem 基准靠 JS 动态设会闪屏，老 iOS 里 flex 子元素的 min-width 会被无视——这三处是实际项目中最常导致“看起来自适应、实则处处崩”的硬伤。
viewport 必须写全且只写一次
移动端页面文字小、横向滚动、touch 事件偏移，八成是 <meta name="viewport"> 没配对。它不是锦上添花，而是浏览器渲染响应式布局的开关。
-
width=device-width和initial-scale=1.0必须同时存在；只写前者，iOS Safari 会按 980px 渲染再缩放，字体模糊、点击错位 - 不要写
width=375这类固定值——不同设备的 “375” 对应物理像素不同，横屏时直接失效 - 同一页面中
<meta name="viewport">只能出现一次，重复写会导致部分 Android WebView 忽略后续声明 - 若需禁用缩放，优先用
minimum-scale=1.0, maximum-scale=1.0，比user-scalable=no兼容性更稳
rem 基准必须前置到 HTML 解析阶段
用 document.documentElement.style.fontSize 在 DOMContentLoaded 里动态设根字号，必然闪屏：浏览器先按默认 16px 渲染，再重绘。用户肉眼可见文字突然变大/变小。
- 正确做法是在
<head>最顶部加内联<style>，用calc()直接算死：html { font-size: calc(100vw / 375 * 16px); }（以 375px 设计稿为基准） - 避免在
calc()里混用单位，如100vw / 375 * 1rem—— Safari 旧版本不支持，必须统一为px - 别依赖 JS 读取
window.innerWidth再计算：横竖屏切换、双击放大后，该值可能滞后或返回视觉视口宽度，而非布局视口
flex 子元素在 iOS 12 及以下不认 min-width
写 flex: 1 的容器里放一个 min-width: 200px 的按钮，在 iPhone 6s 或更老设备上，按钮会被压缩到 0 宽——这不是 bug，是老版 flex 算法对 min-width 的忽略逻辑。
立即学习“前端免费学习笔记（深入）”；
- 替换方案：给该子元素加
flex-shrink: 0，强制不收缩 - 或改用
width: max-content; flex: 0 0 auto，比min-width更受老 iOS 尊重 - 别用
flex-basis做关键尺寸控制——Android Chrome 80 之前也有类似兼容性问题，表现不一致
srcset 不生效？先关掉第三方 lazyload
写了 <img srcset="a.jpg 320w, b.jpg 768w" sizes="(max-width: 320px) 100vw, 50vw">，但 Network 面板里永远只加载 a.jpg，大概率是第三方 lazyload 库（比如 lozad.js）劫持了 srcset 解析逻辑。
- 原生
loading="lazy"和srcset是协同工作的，无需额外库 - 若必须用第三方 lazyload，请确认它是否明确支持
srcset+sizes的解析；否则手动降级为单图src+ JS 切换 - 慎用
calc(100% - 480px)类宽度配合 flex：某些安卓 WebView 在页面缩放后，100%会按视觉视口计算，导致中间栏变窄甚至换行；加min-width: 0可缓解
真正难的不是写出适配代码，而是让所有设备在第一次渲染时就对齐预期——viewport 决定起点，rem 基准决定缩放锚点，flex 行为决定子元素生存空间，三者缺一不可，且顺序不能乱。
