微信内置浏览器CSS兼容核心是精准识别X5内核并分层降级：需用isWechatInX5()函数双重判断（MicroMessenger存在且QQBrowser版本匹配或X5JSSDK定义），Flex布局须严格按顺序声明display: -webkit-box、-webkit-flex、-ms-flexbox、flex，并配对-webkit-box-align等旧版属性，autoprefixer依browserslist自动补全更可靠。
微信内置浏览器的 CSS 兼容问题，核心不是“加前缀”，而是必须精准识别 X5 内核并分层降级——漏掉 -webkit-box 会导致 iOS 8 直接不渲染 flex 容器，只写 display: flex 在 X5 上等于没写。
怎么准确判断当前运行在微信 X5 内核上
仅靠 navigator.userAgent.includes('MicroMessenger') 会误判：安卓微信常伪装成 MQQBrowser/6.2，部分低版本甚至不带 QQBrowser 字样；iOS 虽用 WKWebView，但 JS 层有拦截逻辑，window.X5JSSDK 才是真实锚点。
必须同时满足：
-
/MicroMessenger/i.test(navigator.userAgent)为 true - 且
/QQBrowser\/\d+\.\d+/i.test(navigator.userAgent)或typeof window.X5JSSDK !== 'undefined'为 true
建议封装成 isWechatInX5() 函数，后续所有兼容逻辑都基于它触发，避免在 Chrome 或 Safari 里白跑一堆 -webkit- 规则。
立即学习“前端免费学习笔记（深入）”；
Flex 布局失效时该补哪几套 display 声明
X5 对 display: flex 的支持是碎片化的：iOS 8 只认 display: -webkit-box，iOS 9–10 需要 display: -webkit-flex，而 Android X5 早期版本连 -webkit-flex 都不全支持。
必须四重声明并严格排序：
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
顺序不能错——浏览器按顺序取第一个能识别的值。对齐属性也必须配对：-webkit-box-align: center + -webkit-align-items: center + align-items: center，缺 -webkit-box-align 在 iOS 8 下 align-items 彻底无效。子项伸缩别只写 flex: 1，得补 -webkit-box-flex: 1 + -webkit-flex: 1，否则 X5 下子元素宽度为 0。
为什么 autoprefixer 比手写前缀更可靠
手写前缀容易翻车：比如 Sass @mixin 里硬编码 -ms-flexbox，但现代 Edge 已不需要；更糟的是 gap 或 aspect-ratio 这类新属性，@mixin 根本没覆盖，而 autoprefixer 会根据 browserslist 自动查 Can I Use 数据补全。
配置 browserslist 必须精确到内核版本，例如写 ios_saf >= 10、and_qq >= 10，不能只写 last 2 versions——后者默认不含 iOS 10。loader 顺序必须是：less-loader → postcss-loader → css-loader，否则 @import 会被提前解析，前缀加不上。
viewport 和图片渲染必须硬编码
微信会劫持 <meta name="viewport">，删掉参数、重设缩放，导致图片左右留白不均或模糊。它还跳过 srcset 和 sizes，只取 <img src> 的第一个值。
必须写死：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
少一个都可能被干预。<img> 标签要加 style="max-width: 90%; height: auto;"，别只靠 CSS 类控制。高清图别依赖 srcset，直接提供 2x 尺寸的 src，或用 <picture> + <source> fallback 到 <img src>。背景图偏移？改用 <img> 替代 background-image，或用 object-fit: cover + position: absolute 模拟。
真机测试永远不可替代——用文件传输助手发本地 index.html 才能复现 X5 的实际渲染链路；开发者工具模拟不了它的 UA 劫持、JS 拦截和 CSS 解析优先级。最易忽略的点是：所有 flex 降级规则必须包裹在 isWechatInX5() 判断之后，否则上线后会在 Safari 里多加载一整套冗余样式，影响首屏性能。
