安卓 WebView 样式问题需用 normalize.css v8.0.1+ 本地引入、禁用 text-size-adjust、显式设 flex-shrink: 0、删 font-smoothing、用 text-rendering 和 system-ui 字体。
安卓 WebView 里样式乱掉，先检查是否漏了 normalize.css
很多安卓机型（尤其旧版系统或定制 ROM）的 WebView 默认样式差异极大，button 圆角、input 行高、font-size 缩放行为都不统一。不引入 normalize.css 就直接写业务样式，等于在流沙上盖楼——表面能跑，一换机型就错位。
实操建议：
- 必须用
normalize.cssv8.0.1 或以上版本，v7 及更早对 Android 4.4+ 的flex和text-rendering修复不全 - 不要只 link CDN，建议本地引入并放在
最顶部，避免 CSS 加载闪动导致重排 - 别和
reset.css混用——两者冲突时，normalize的语义化重置会被覆盖，反而放大差异
Android 4.4–6.0 下 viewport 缩放失效，得手动补 text-size-adjust
这些版本的 WebView 对 viewport 中的 user-scalable=no 支持残缺，用户双指缩放仍可能触发，导致文字被强制放大、布局撑开。单纯靠 JS 监听 resize 并不可靠，因为缩放不总触发该事件。
实操建议：
- 在全局 CSS 里加：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } - 不能只写
-webkit-前缀，Android 5.0+ 已支持无前缀版本，但漏掉会导致部分三星/华为机型回退到默认缩放逻辑 - 若页面含
font-size: xx-small或rem基于小屏设值，要同步检查html根字体是否被系统缩放干扰——此时需用window.matchMedia检测screen.width变化辅助判断
Flex 布局在 Android 4.4 WebView 里塌陷，得加 flex-shrink: 0 显式控制
Android 4.4 的 Blink 内核对 flex 的默认 flex-shrink 计算有 bug：当子元素含图片或 inline-block 时，会错误压缩宽度至 0，尤其在横屏切换后重现率极高。
实操建议：
- 所有关键 flex 子容器必须显式声明：
flex-shrink: 0（不能依赖默认值） - 避免用
flex: 1简写——它在旧内核里会隐式带flex-shrink: 1，改用flex: 1 0 auto - 图片必须设
max-width: 100%且父级加overflow: hidden，否则 flex 容器无法正确测量其自然宽
字体渲染模糊？不是 antialiased 的问题，是 font-smoothing 在安卓上压根无效
很多开发者看到文字发虚，第一反应是加 -webkit-font-smoothing: antialiased，但在绝大部分安卓 WebView（包括 Chrome for Android 70+）中，这个属性完全被忽略。真正起作用的是系统级字体 hinting 和 text-rendering 的组合。
实操建议：
- 删掉所有
-webkit-font-smoothing相关声明，它只对 macOS Safari 有效 - 改用：
body { text-rendering: optimizeLegibility; }—— 这个在安卓 5.0+ 的 Blink 中实际生效，能改善连字和字距 - 中文字体优先指定
system-ui，比如：font-family: system-ui, "Source Han Sans SC", sans-serif；避免用"Helvetica"这类 iOS 专属字体名，安卓会 fallback 到模糊的默认等宽字体
最麻烦的点往往藏在“看起来正常”的机型上——比如某款 OPPO 的 ColorOS 12.1，它把 normalize.css 里针对 textarea 的 vertical-align 重置给吃了，但只在软键盘弹出后才暴露。这种 case 得靠真机录屏逐帧看 baseline 位移，模拟器根本复现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
