移动端Hybrid应用中iOS与Android WebView的CSS渲染存在系统级差异，需全局重置box-sizing、显式声明flex属性、统一字体栈及line-height、规范伪元素写法，并通过真机截图与DOM验证保障三端一致性。
移动端 Hybrid 应用里，iOS 和 Android WebView 渲染 CSS 的差异不是“偶尔不一致”，而是从盒模型、字体渲染、表单控件到 flex 布局默认行为都存在系统级偏差。直接写一套 CSS 通吃双端，大概率在 Android X5 内核或 iOS 17+ 上出现文字截断、按钮塌陷、flex 项错位等现象。解决思路不是加更多 hack，而是用可验证的约束收口基础层。
为什么 box-sizing: border-box 必须全局强制重置
Android 系统 WebView（尤其低版本）对 input、textarea、select 默认使用 content-box；iOS WebKit 则多数场景走 border-box。这会导致相同 padding + width 在双端实际占用宽度不同，表单控件在 Android 上容易撑出容器。
- 必须在 CSS 入口文件最顶部写：
* { box-sizing: border-box; }，不能只作用于某类组件 - 避免用
:where(*)或:is(*)包裹，部分旧版 X5 内核不识别 - 若项目已用 CSS Reset，检查是否覆盖了表单元素——很多 reset 只重置
div/p，漏掉button和input
Flex 布局在 Android X5 和 iOS WebKit 中的默认值差异
flex-direction、align-items、justify-content 在不同内核下有隐式初始值差异。例如 Android 4.4 系统 WebView 中 flex-direction: row 对某些 inline 元素会失效，而 iOS 会自动 fallback。
- 所有 flex 容器必须显式声明
display: flex和至少一个主轴方向属性，如flex-direction: row - 禁用
flex: 1单独使用，改用flex: 1 1 0，避免 X5 内核解析为flex: 1 1 auto导致高度计算错误 - Android X5 对
align-self支持不稳定，优先用align-items控制整体，而非单个子项
字体与行高的跨端一致性控制
iOS 使用 San Francisco，Android 多用 Roboto 或 Noto Sans，但更关键的是：WebKit 对 line-height 的基线处理和 Android 系统 WebView 对 font-size 的缩放逻辑不同。常见表现是同一段文字在 Android 上行距偏小、首行文字上移。
- 基础字体栈必须包含
-apple-system和Roboto，并以sans-serif收尾，不能省略 - 禁止仅设
font-size，必须搭配line-height，且推荐用无单位数值（如line-height: 1.4），避免px或em在缩放时失准 - 对标题类文字，额外加
margin-top: 0; margin-bottom: 0;，防止 iOS 自动插入段间距
伪元素与表单控件样式穿透的兼容写法
Hybrid 场景下，宿主壳可能注入全局样式（比如强制 input::-webkit-input-placeholder { color: #999; }），而 Android X5 不支持 ::-webkit-input-placeholder，导致 placeholder 颜色/透明度完全失控。
- 统一用标准语法：
::placeholder，不要写带前缀的变体 - 所有表单控件的伪元素样式必须配
!important，否则宿主样式或 WebView 默认样式会覆盖 - 避免用
input[type="number"]::-webkit-inner-spin-button类选择器——X5 完全不识别，且 iOS 16+ 已开始限制该伪元素暴露
真正难的不是写出能跑的 CSS，而是让每一处 margin、padding、vertical-align 在 Android X5、iOS WebKit、鸿蒙 Web 组件三端都产生可预期的像素级结果。这意味着不能依赖“看起来差不多”，而要靠真实设备截图比对 + DOM class 层级验证——尤其是当宿主壳注入了未知 CSS 时，BEM 类名是否还在 DOM 里原样存在，比任何样式规则都重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
