必须在中添加viewport元标签，否则页面在手机上会缩成一团；需动态设置font-size或使用vw单位适配不同屏幕；点击区域应≥44×44px并用touch-action: manipulation消除300ms延迟；iOS旧版Safari对flex有兼容问题，需针对性写法；真机测试不可替代。
viewport 设置不对，页面在手机上直接缩成一团
手机浏览器默认按桌面宽度渲染页面，不加 viewport 元标签，哪怕写得再“响应式”，实际打开就是一小块可缩放区域。这不是样式问题，是渲染根逻辑没对。
- 必须在
里加：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-
width=device-width让页面宽度匹配设备物理视口，不是固定值；initial-scale=1.0防止双击放大后错位；user-scalable=no看需求，多数 App 风格界面会关掉缩放 - 别信“写了 viewport 就万事大吉”——iOS Safari 对
maximum-scale=1.0的处理有 bug，真要禁缩放，优先用user-scalable=no，且测试真机
用 rem 或 vw 做适配，但 font-size 没随屏幕动态改
只写 html { font-size: 16px; } 然后所有尺寸用 rem，等于没做适配。手机屏幕千差万别，16px 在 iPhone 15 和 Pixel 8 上视觉大小差一倍多。
- 简单可靠的做法：JS 动态设
document.documentElement.style.fontSize，按屏幕宽度等比缩放，比如375px → 16px，414px → 17.8px - 更省事的替代：直接用
vw单位，font-size: 4.26vw（即 375px 宽时为 16px），但注意 Android 4.4– 最老版 WebView 不支持vw在font-size中使用 - 别混用
rem和px做关键间距——按钮高度用rem，内边距却写死12px，小屏下文字挤满按钮，点不中
点击区域太小，手指点不准还触发 300ms 延迟
移动端最小可触控区域建议 ≥ 44×44px，但更关键的是浏览器默认的点击延迟和伪类失效问题。
- 给所有可点元素加
cursor: pointer（iOS Safari 需要这个才激活:active伪类） - 用
touch-action: manipulation关掉 300ms 延迟，兼容性够用（iOS 9.3+、Android Chrome 32+） - 别依赖
:hover做交互反馈——手机没悬停概念，:active才是正确选择，且要确保父容器没阻止事件冒泡 - 如果用了
fastclick这类库，现在基本没必要了；现代浏览器开touch-action就行，额外 JS 只增首屏负担
flex 布局在 iOS 旧版 Safari 里塌陷或换行错乱
iOS 9–12 的 WebKit 对 flex 的实现有多个已知缺陷，比如 flex: 1 不生效、min-height 被忽略、flex-wrap 行为异常。
立即学习“前端免费学习笔记（深入）”；
- 避免单独用
flex: 1填满剩余空间，改用flex: 1 1 0（即flex-basis: 0），老 Safari 更认这个写法 - 需要撑满高度的容器，除了
display: flex，还得显式设min-height: 100vh，否则 iOS Safari 可能按内容高度渲染，留白 - 横向滚动区域慎用
flex-wrap: wrap，老版本容易把子项全挤到第一行，改用white-space: nowrap+overflow-x: auto更稳
真机测试比任何文档都管用，特别是 iOS 12 和 Android 6–8 的 WebView 行为，模拟器根本跑不出那些诡异的 flex 换行或 touch 事件丢失。别跳过这步。
