跨平台兼容需聚焦 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 通常无此问题。
