不能用CSS判断宿主WebView类型，因其无运行时探测能力；必须通过JS结合UA与特性检测动态添加html类名，再由CSS基于该类名条件应用样式，否则真机上必然失效。
不能用 CSS 判断宿主 WebView 类型——CSS 没有运行时能力去探测 WebView 内核、宿主 App 名称或注入环境，所有试图靠 @supports、伪类或媒体查询“猜”是 X5、WKWebView 还是系统 WebView 的做法，都会在真机上失效。
为什么 @supports (-webkit-appearance: none) 不能识别 WKWebView
这个写法看似合理，但实际匹配的是渲染引擎特性，不是宿主环境。iOS 16+ 的 SFSafariViewController 和部分 Android 定制 WebView 都支持 -webkit-appearance，而某些降级的 X5 内核（如旧版 QQ 浏览器）反而禁用了该属性。更关键的是：宿主可能主动移除或重写 CSSOM，@supports 规则本身就被剥离了。
-
@supports只在 CSS 解析阶段起作用，无法响应运行时注入的样式或 JS 动态修改 - Android X5 内核会劫持
document.styleSheets，导致你写的规则根本没进 CSSOM - 即使匹配成功，你也无法区分是“WKWebView”还是“SFSafariViewController”，二者都返回 true
真机上唯一可靠的宿主探测方式是 JS + UA + 特性检测组合
CSS 不行，必须让 JS 承担探测责任，再把结果透出给 CSS 使用。核心思路是：JS 检测 navigator.userAgent、window.webkit、typeof window.qbjsbridge 等宿主特征，然后写一个 class 到 或 上，CSS 通过该 class 做条件样式。
- 检测 X5：
/(MQQBrowser|QQ)/i.test(navigator.userAgent) && /X5/i.test(navigator.userAgent) - 检测 WKWebView：
!window.navigator.standalone && window.webkit && window.webkit.messageHandlers - 检测 UC 内核：
/UCBrowser/i.test(navigator.userAgent) && /U3/i.test(navigator.userAgent) - 务必在
DOMContentLoaded前执行，否则 class 注入延迟会导致首屏样式错乱
示例：
if (/X5/i.test(navigator.userAgent)) {
document.documentElement.classList.add('host-x5');
} else if (window.webkit && window.webkit.messageHandlers) {
document.documentElement.classList.add('host-wkwebview');
}
对应 CSS：
.host-x5 .card__title { color: #333 !important; }
.host-wkwebview .card__title { color: #222; }
为什么直接在 CSS 里写 .host-x5 类名不安全
很多团队会把宿主 class 名硬编码进构建产物，比如 Webpack DefinePlugin 注入 process.env.HOST = 'x5'，然后模板里写 。这在开发期看着没问题，但上线后极易翻车：
- 宿主 App 更新内核（比如从 X5 升级到 TBS），但前端没发版，class 名还叫
host-x5，样式就错配了 - 同一 App 在不同渠道包（华为/小米/应用宝）用的 WebView 内核不同，但构建产物一样
- CDN 缓存了旧 HTML，而 JS 探测逻辑已更新，class 名和实际环境不一致
真正安全的做法是：JS 探测必须每次运行，class 必须动态添加，且不参与 SSR 或构建时注入。
第三方组件挂载到 document.body 时如何保持宿主 class 生效
像 van-popup、ant-design-mobile 的弹窗默认插入 document.body，脱离当前 Vue/React 组件树，也就脱离了你加在 上的宿主 class。此时 CSS 选择器无法穿透。
- 不要依赖 scoped 或 module CSS，它们对 body 外节点完全无效
- 必须用
:global()或全局样式，并确保选择器以html.host-x5开头，例如：html.host-x5 body .van-popup { z-index: 9999; } - 避免写
body .van-popup—— 宿主注入的全局样式可能带!important，层级不够会被覆盖 - 如果弹窗内容需要差异化样式（比如 X5 下按钮禁用圆角），得在 JS 中监听弹窗 mount，再手动加 class
复杂点在于：宿主 class 的探测时机、第三方组件的挂载时机、CSS 加载顺序三者必须对齐。稍有错位，就会出现“明明 class 加上了，但样式没生效”的情况——这不是 CSS 写错了，是执行时序没控住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
