viewport 设置不生效需检查 meta 标签位置、拼写及是否被覆盖；flex 子项不换行要约束父容器宽度并慎用 min-width；按钮点不到需满足 44×44px 触摸热区；Safari 旧版需用 flex: 1 1 0 替代 flex: 1。
viewport 设置不生效？检查 meta 标签是否写对了
网页在手机上还是显示缩放后的桌面版，大概率是 没写、写错位置，或被其他脚本覆盖。它必须放在 内，且不能有空格或拼写错误。
- 正确写法：
-
width=device-width表示视口宽度 = 设备屏幕宽度（不是固定像素），这是响应式的基础 - 不要加
user-scalable=no—— 屏幕阅读器和部分残障用户依赖双指缩放，禁用会违反可访问性要求 - 如果用了构建工具（如 Vite/Next.js），确认该标签没被 SSR 模板或插件自动删掉或覆盖
flex 布局子元素不换行？别只靠 flex-wrap
设了 display: flex 但内容在小屏上溢出、文字被裁剪，往往不是没加 flex-wrap: wrap，而是父容器没限制宽度，或者子项设置了死的 width 或 min-width。
- 先确保父容器有明确宽度约束：比如
max-width: 100%或width: 100%，否则 flex 容器可能撑开 body 导致横向滚动 - 子项慎用
min-width: 300px这类固定值 —— 在 320px 宽的旧手机上直接失效；改用min-width: 0+flex: 1让其可压缩 -
flex-wrap: wrap必须配合flex-basis或flex: 0 1 auto才能按需折行，纯flex: 1可能让子项强行拉伸不换行
移动端按钮点不到？检查 touch 目标尺寸和 flex 对齐方式
Flex 布局常把按钮居中（justify-content: center），但在小屏上若按钮本身太小，手指点击区域不足 44×44px，就会误触或点不中 —— 这不是 CSS bug，是 WCAG 和 iOS/Android 平台规范要求。
- 给按钮加
min-height: 44px和padding: 12px 16px，确保触摸热区达标 - 避免用
align-items: flex-start后又让按钮内容靠右，导致视觉中心和点击热区偏移 - 如果按钮是
flex子项且设置了margin: auto居中，在某些安卓 WebView 中可能计算异常；改用justify-content: center+align-items: center更稳妥
flex 在 Safari 旧版本里塌陷？记得补全老式前缀和 fallback
iOS 9.3 或 macOS Safari 9 的 flex 实现不支持 flex: 1 简写中的隐式 flex-basis，会导致子项高度为 0 或布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 写成完整形式：
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0）比flex: 1更兼容 - 对关键布局容器，建议加一层
min-height: min-content防止 Safari 把空 flex 容器高度算成 0 - 不用前缀（如
-webkit-flex）也能跑，但必须确保没有混用新旧语法，比如同时写了display: -webkit-flex和display: flex，旧 Safari 可能只认前者而忽略后者
flex-basis 的解析差异 —— 这两个点不报错、不警告，但一上线就让用户点不着或布局消失。 
