微信里打开你的目录站，样式就散了：XWeb 内核、系统 WebView 和一套降级顺序
微
有人发来截图，安卓手机上分类页的筛选按钮叠在了一起，底部的「提交网址」压住了最后一条。他自己用 iPhone 看是好的，让我「修一下安卓的样式」。这种问题在目录站上很常见，因为微信里的浏览器压根不是一个统一的运行环境。
图片来源：网络，版权归原作者所有，侵权请联系删除
两个平台，两套内核
iOS 侧简单：苹果规定所有浏览器都用 WebKit，微信在 iOS 上跑的也是 WKWebView，和你用 Safari 打开基本一致。差异主要在安全区和键盘行为上。
安卓侧复杂得多。微信在安卓上用自己的 XWeb 内核，基于 Chromium 开发，但版本会落后官方 Chrome。有安全研究团队在 2025 年拆过包，当时现网版本大致相当于 Chromium 130 左右，开发版到 134，而官方 Chrome 已经到 136。这个差距不算大，但足以让刚发布一两年的 CSS 特性在某些机型上不可用。
| 环境 | 渲染内核 | 对目录站的影响 |
|---|---|---|
| iOS 微信 | WKWebView，与 Safari 同源 | 行为一致，主要处理安全区与键盘 |
| 安卓微信 | XWeb，基于 Chromium | 版本滞后官方，新特性要看具体版本 |
| 旧机型 / 旧客户端 | 可能退回系统 WebView | 系统组件版本低时新 CSS 支持不全 |
| 其他国产浏览器 | 多为 Chromium 套壳 | 差异集中在 UA 与下载行为上 |
第三种情况最容易被忽略。低版本安卓或者某些定制系统上，微信可能落到系统 WebView 上渲染，而系统 WebView 是用户自己更新、也可能几年没更新的组件。遇到版本很低的 WebView，CSS 变量、网格布局、容器查询这些都可能失效。
UA 里那串字符能看，但不能拿来判断
微信的 UA 里有几个标识：MicroMessenger/8.0.x 是客户端版本，XWEB/xxxx 是内核版本号，MMWEBSDK 是 SDK 版本。做日志分析时按这几个字段分组很有用，能快速看出「问题是集中在某个客户端版本，还是全平台都有」。
但别用版本号去做功能判断。原因有两个：同一个 XWeb 版本在不同机型上行为并不完全一致；而且浏览器厂商这些年一直在缩减 UA 里的信息量，靠版本号推断能力越来越不可靠。
正确的做法是特性检测。CSS 用 @supports，JS 用 CSS.supports() 或者直接看某个 API 在不在 window 上。
@supports (display: grid) {
.listing { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@supports not (display: grid) {
.listing { display: flex; flex-wrap: wrap; }
.listing .item { width: 50%; }
}这段写法比任何版本号判断都稳：浏览器不支持就自动走降级分支，不需要你维护一张版本对照表。
目录站最常踩的几处
- 100vh 不等于可视高度。微信里 100vh 包含了地址栏，底部内容会被推出去。可以用 dvh，或者用 JS 算一个 CSS 变量兜底。
- 底部固定栏压内容。给 body 加对应高度的下内边距，还要留
env(safe-area-inset-bottom)，否则全面屏底部手势区会盖住按钮。 - 输入框聚焦把页面顶起来。监听 focus 与 blur 手动调整滚动位置，比依赖浏览器的自动滚动稳。
- 输入框字号小于 16px 会触发整页放大。iOS 和部分安卓都这样，把搜索框字号设成 16px 是最省事的解法。
- 长按图片弹出保存菜单。缩略图多的地方体验很糟，加
-webkit-touch-callout: none。 - 列表局部滚动卡顿。安卓上加
-webkit-overflow-scrolling: touch会有改善，但要确认它不会和吸顶头部冲突。
降级顺序：先内容，再布局，最后才是新特性
我现在的写法是分三层。第一层保证纯 HTML 可读，不依赖任何 CSS 也能看到站名和分类；第二层用 flex 这样的老特性把布局撑起来；第三层才是 grid、容器查询、aspect-ratio 这些。
这样排的原因是微信里的异常往往是「样式没生效」而不是「全挂了」。只要内容可读、链接可点，用户能完成任务；反过来如果首屏依赖 grid 才显示条目，一旦失效就是一片空白。
测试矩阵不用追机型，追内核
目录站没有资源覆盖几十款手机，但可以用三个维度把风险控住：一台 iPhone、一台近两年的安卓主力机、一台三四年前的安卓旧机。三台覆盖了 WKWebView、新 XWeb、旧系统 WebView 三种情况。
再加一条线上的：前端错误日志按 UA 里的客户端版本分组，每周看一眼哪一组报错最多。真机上测不出来的问题，日志里往往有几十条重复记录。