移动端页面适配关键在于正确配置viewport meta标签、rem基准前置计算、兼容老ios的flex布局及srcset与lazyload协同；必须写全width=device-width和initial-scale=1.0，用calc()在head内联设置font-size，flex子元素加flex-shrink:0替代min-width，慎用第三方lazyload。
viewport meta 标签写不对，页面就永远缩在左上角
移动端页面不放大、文字小得看不清，八成是 <meta name="viewport"> 没配对。它不是可选装饰，而是浏览器渲染的开关。
常见错误：<meta name="viewport" content="width=device-width"> 缺少 initial-scale=1.0，iOS Safari 会默认以 980px 宽度渲染再缩放，导致 touch 事件错位、字体模糊。
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">（最后两项按需保留） -
width=device-width不是像素值，是 CSS 像素宽度，对应设备 dpr 下的逻辑宽度 - 不要用
width=375这类固定值——iPhone SE 和 Pixel 7 的“375”含义不同，且横屏时直接崩
CSS rem 布局里，根字体大小不能靠 JS 动态算完再改
用 document.documentElement.style.fontSize 在 DOMContentLoaded 里设 rem 基准，会导致闪屏：先按浏览器默认 16px 渲染，再重绘。用户看到文字突然变大/变小。
真正可靠的做法是把计算逻辑前置到 HTML 解析阶段：
立即学习“前端免费学习笔记（深入）”；
- 在
最顶部加内联<style></style>，用calc()直接写死：html { font-size: calc(100vw / 375 * 16px); }（以 375px 设计稿为基准） - 避免用 JS 读取
window.innerWidth再 setStyle——横竖屏切换、双击放大后，JS 获取的宽可能滞后或不准 - 注意：Safari 旧版不支持
calc()里混用单位（如100vw / 375 * 1rem），必须统一为px
flex 布局在 iOS 12 以下会吃掉子元素的 min-width
写 flex: 1 的容器里放一个 min-width: 200px 的按钮，iOS 12 及更早系统中按钮会被强行压缩到 0 宽——这不是 bug，是 flex 算法老版本对 min-width 的忽略。
绕过方式不是升级系统，而是换约束逻辑：
- 给该子元素加
flex-shrink: 0，强制不收缩 - 或者改用
width: max-content+flex: 0 0 auto，比min-width更受老 iOS 尊重 - 别依赖
flex-basis做关键尺寸控制——Android Chrome 80 之前也有类似问题，表现不一致
图片 srcset 和 sizes 属性不生效，大概率是没关掉 lazyload
写了 <img srcset="a.jpg 320w, b.jpg 768w" sizes="(max-width: 320px) 100vw, 50vw" alt="HTML5移动端适配怎么做_手机网页自适应布局教程【指南】" >，但 Network 面板里永远只加载 a.jpg——检查是否用了第三方 lazyload 库（比如 lozad.js），它常直接改 src 而忽略 srcset。
- 原生
loading="lazy"是安全的，浏览器自己处理srcset选择 - 若必须用 JS lazyload，请确保它调用
el.setAttribute('src', chosenSrc)前，已根据sizes和当前视口宽度算出正确资源 - 调试技巧：临时删掉 lazyload，打开 DevTools → Network → Disable cache，硬刷看是否切图正常
实际项目里最麻烦的不是写适配代码，而是同一段 CSS 在 iOS Safari、Chrome for Android、微信内置浏览器里触发不同的回退行为——它们对 viewport 解析、flex 处理、甚至 rem 计算都有毫秒级差异。留个心眼：真机连着 DevTools 测，别信模拟器。
