跨平台兼容需聚焦 viewport 解析、input 行为、flex 渲染和 touch-action 四大差异点：强制设置 viewport 宽度与缩放约束；用 inputmode 替代 type 并禁用 iOS 自动修正；flex 容器设 align-content: flex-start 与 gap；touch-action 慎用 none，横向滚动用 pan-y。
viewport 设置不统一导致缩放/布局错乱
安卓 WebView 和 iOS Safari 对 viewport 的解析存在细微差异，尤其在双击缩放、初始缩放值、user-scalable 行为上。iOS 更严格遵循标准，而部分安卓系统（尤其旧版 Chrome 或定制 WebView）会忽略 maximum-scale=1.0 或误判 width=device-width 的实际像素值。
- 强制使用
—— 注意maximum-scale=1.0和user-scalable=no必须同时存在，仅设后者在某些安卓机型上无效 - 避免用
target-densitydpi（已废弃，仅旧安卓支持，且与 iOS 冲突） - 若需适配刘海屏或全面屏，用
env(safe-area-inset-top)+constant(safe-area-inset-top)，但 iOS 11.2+ 支持env()，安卓 Chrome 69+ 才开始支持；稳妥起见可并写：padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);
input 类型与软键盘触发行为不一致
安卓和 iOS 对 、、 的软键盘调起逻辑不同：iOS 会严格匹配类型弹出对应键盘，而部分安卓浏览器（如三星 Internet）可能一律弹出默认键盘，或对 pattern 解析不一致。
- 用
inputmode替代或补充type：例如，iOS 12.2+ 和安卓 Chrome 71+ 均支持inputmode，优先级高于type - 禁用 iOS 自动首字母大写和拼写检查：
autocapitalize="none" autocorrect="off" spellcheck="false" - 安卓部分 WebView 下
focus()可能不自动唤起键盘，需加setTimeout(() => input.focus(), 300)延迟触发
flex 布局在 iOS Safari 中的 wrap 与对齐 bug
iOS Safari（尤其 14.x–15.x）对 flex-wrap: wrap 容器内子项的 align-items 或 justify-content 渲染异常，表现为换行后末行项目垂直偏移、高度塌陷；安卓 Chrome 通常无此问题。
- 给 flex 容器显式设置
align-content: flex-start（而非默认的stretch），可修复 iOS 下多行时的垂直对齐错位 - 避免对 flex 项目单独设
margin-bottom控制间距，改用gap（iOS 14.5+ 和安卓 Chrome 84+ 均支持），或退化为margin-right/margin-bottom+:last-child重置 - 若用
flex: 1占满剩余空间，在 iOS 中可能因父容器未设min-height: 0导致高度计算错误，需补上：min-height: 0到直接父容器
CSS touch-action 与滚动冲突导致 iOS 卡顿
安卓对 touch-action 兼容性较好，但 iOS Safari（尤其 13–15）在 touch-action: none 或 pan-x pan-y 与原生滚动嵌套时，易出现滚动延迟、手势吞没或页面卡死。
立即学习“前端免费学习笔记（深入）”；
- 慎用
touch-action: none全局禁用——仅在明确需要自定义手势的区域（如轮播图容器）设置，并确保该区域不包含可滚动内容 - 若需横向滚动列表，用
touch-action: pan-y（允许竖向滚动，禁用横向），而非pan-x（iOS 对 pan-x 的拦截更激进，易误杀滚动） - iOS 中
overflow: scroll容器必须有明确的height或max-height，否则touch-action行为不可预测；安卓对此较宽容
