移动端适配问题90%源于viewport标签缺失或错误：必须在head最上方静态声明width=device-width, initial-scale=1.0；rem需用CSS calc内联计算根字号防闪屏；flex布局需注意老iOS对min-width的忽略；srcset失效多因第三方懒加载覆盖，应优先用原生loading="lazy"；禁用user-scalable=no以保障可访问性。
移动端页面在手机上缩成一团、文字看不清、点击错位——90% 是因为 viewport 标签没写对，或根本没写。它不是“锦上添花”，而是浏览器渲染的开关，缺了就直接退化到桌面模式。
viewport meta 标签必须放在
浏览器按顺序解析 HTML，viewport 必须在首次渲染前生效。如果它出现在 里、被 JS 动态插入、或在 SSR 模板中漏掉，iOS Safari 和多数 Android WebView 会忽略，导致默认以 980px 宽度渲染再整体缩放。
- ✅ 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，且位于最上方，早于所有 CSS/JS 引用 - ❌ 错误做法：用
document.head.appendChild()插入；或在 Vue/React 的客户端 hydrate 阶段才补；或服务端吐出的 HTML 里压根没有 - ⚠️ 硬编码
width=375或width=414会导致横屏、折叠屏、模拟器下布局崩坏——device-width是设备报告的逻辑宽度，不是物理像素值
rem 布局别等 DOM 加载完再算根字号
用 JS 在 DOMContentLoaded 里执行 document.documentElement.style.fontSize = ...，会造成闪屏：先按浏览器默认 16px 渲染，再重绘。用户能明显看到文字跳变。
- ✅ 推荐做法：把计算逻辑前置到 HTML 解析阶段，例如在
内联一段<style>html{font-size:calc(100vw / 375 * 10px);} </style>（假设设计稿宽 375px），现代浏览器支持良好 - ❌ 避免在
window.addEventListener('resize', ...)中反复 setStyle——横竖屏切换、双击放大后，window.innerWidth可能滞后或不准 - ⚠️ 不要依赖
min-width或max-width控制 rem 基准，极端小屏（如翻盖机）或超大平板可能让字号失真；可加clamp(12px, 100vw / 375 * 10px, 24px)限幅
flex 布局在 iOS 12 及更早系统里会吃掉 min-width
写 flex: 1 的容器里放一个 min-width: 200px 的按钮，在 iPhone 6s（iOS 12）上会被压缩到 0 宽——这不是 bug，是老版 flex 算法对 min-width 的忽略。
立即学习“前端免费学习笔记（深入）”；
- ✅ 替代方案：给该子元素加
flex-shrink: 0，强制不收缩；或改用width: max-content; flex: 0 0 auto; - ❌ 别只靠
flex-basis做关键尺寸控制——Android Chrome 80 之前也有类似不一致表现 - ⚠️ iOS 8–9 下若用
flex-direction: column+height: 100vh，父级没设height: 100%，子项高度会算成 0；需补全继承链
srcset 不生效？先关掉第三方 lazyload 库
写了 <img srcset="a@2x.jpg 2x, b@3x.jpg 3x">，但 Network 面板里永远只加载低清图——大概率是第三方 lazyload（如 lozad.js、vanilla-lazyload）在接管 src 时直接覆盖了 srcset 逻辑。
- ✅ 安全方案：用原生
loading="lazy"，浏览器自己处理srcset选择和 DPR 匹配，兼容性好且无干扰 - ❌ 别在
img上同时写data-src和srcset，多数 lazyload 库只读data-src并赋值给src，srcset形同虚设 - ⚠️ 高 DPR 屏幕模糊问题，
viewport本身不解决——它只管映射关系；真正要清晰，得靠srcset+ 多倍图，或直接用svg/ icon font
最易被忽略的一点：user-scalable=no 看似防误触，实则锁死双指缩放、违反 WCAG 可访问性要求，iOS 13+ 甚至会降权提示“该网站可能无法正常工作”。除非是 kiosk 屏或嵌入式 WebView（且 native 层已统一控缩放），否则一律删掉。
