viewport 配置错误会导致 flex 布局失效，必须同时设置 width=device-width 和 initial-scale=1.0 且置于 head 最顶部；固定 width 值、滥用缩放限制、父容器未设宽、子项用固定 flex-basis 或混用 absolute 定位均会引发 flex 错乱；真机调试验证 clientWidth 才可靠。
viewport 配置错误会导致 flex 布局失效
不是 CSS 写错了，而是浏览器根本没按设备真实宽度渲染——width=device-width 和 initial-scale=1.0 缺一不可。如果只写 width=device-width，iOS Safari 仍可能以 980px 渲染后再缩放，导致 flex 容器宽度计算失真、子项换行错乱；如果漏掉 initial-scale=1.0，小字号文本触发自动放大，flex 项目被意外拉伸或压缩。
-
viewport必须放在<head>最顶部，早于所有 CSS 和 JS，否则解析延迟会引发首次渲染抖动 - 禁止写成
width=375或width=1024这类固定值，device-width是唯一能匹配 iPhone 14（390px）、Pixel 8（428px）等不同逻辑宽度的写法 - 不要用
maximum-scale=1.0或user-scalable=no，它们会干扰 Safari 的 zoom 行为，使flex-wrap: wrap在双指缩放时突然崩断
flex 布局在 viewport 正确前提下仍错乱的常见原因
viewport 只管“画布怎么铺”，不解决“元素怎么排”。即使 meta 写对了，以下三点也会让 display: flex 失效：
- 父容器没设
width: 100%或max-width: 100%，导致 flex 容器本身溢出视口，子项被截断或换行异常 - 用了
flex-basis: 320px这类固定像素值，而不是flex-basis: 100%或flex-basis: 0+flex-grow，在小屏上直接撑爆容器 - 嵌套 flex 容器里混用了
position: absolute，脱离文档流后，父级flex无法正确测量高度，造成底部内容被遮挡
如何验证 viewport 是否生效，避免“以为配对了”
别信 DevTools 模拟器——它不模拟 Safari 的缩放策略，也不触发安卓厂商浏览器的私有渲染。真机调试才是唯一可信方式：
- Android：用 Chrome 访问
chrome://inspect，连真机后检查document.documentElement.clientWidth是否等于设备逻辑宽度（如 Galaxy S24 是 412） - iOS：Mac 上 Safari → 开发 → [你的 iPhone 名] → 检查网页，运行
getComputedStyle(document.documentElement).width，应返回类似390px - 如果返回
980px或1024px，说明viewport标签没生效（位置错、拼写错、被 JS 动态插入）
viewport + flex 的最小可靠组合写法
不用加 maximum-scale、minimum-scale 或 user-scalable=no，这些参数在 iOS 16+ 和 Android 14+ 上已被系统弱化，反而干扰辅助功能。最简且兼容性最好的写法就这一行：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0">
配合 CSS 里用 flex 时，记住：容器设 width: 100%，子项优先用 flex: 1 或 flex: 0 0 auto，避免任何硬编码像素值。错乱往往不在 flex 本身，而在 viewport 没把画布交到它手上。
