必须同时满足/MicroMessenger/i.test(navigator.userAgent)为true且/QQBrowser/\d+.\d+/i.test(navigator.userAgent)或typeof window.X5JSSDK !== 'undefined'为true，建议封装为isWechatInX5()函数统一判断。
怎么准确判断当前在微信 X5 内核里运行
只靠 navigator.userAgent.includes('MicroMessenger') 会误判：安卓微信常伪装成 MQQBrowser/6.2，部分低版本 UA 里甚至不带 QQBrowser 字样；iOS 虽用 WKWebView，但 JS 层有拦截逻辑，window.X5JSSDK 才是真实锚点。
必须同时满足两个条件才可确认是 X5 环境：
-
/MicroMessenger/i.test(navigator.userAgent)为 true -
/QQBrowser\/\d+\.\d+/i.test(navigator.userAgent)或typeof window.X5JSSDK !== 'undefined'为 true
建议封装成函数统一调用，所有后续兼容逻辑都基于它触发，避免在 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;
浏览器按顺序取第一个能识别的值。漏掉 display: -webkit-box，iOS 8 下整个容器直接退化为 block；只写 display: flex，在多数 X5 版本中等于没写。
对齐属性也必须配对：
微信聊天分析助手 v2.1.0 — 完全本地运行的隐私保护工具。 分析聊天记录，推断 MBTI 与大五人格，检测情感趋势，生成可视化报告。 支持 jieba 精准分词、否定识别、反讽检测、风险预警。 内置 RAG 检索增强预测和多智能体博弈模拟，完全本地化、零数据外传。 可选 MiroFish 群体智能引擎增强对话预测。
-
-webkit-box-align: center（iOS 8 必需） -
-webkit-align-items: center（iOS 9–10） -
align-items: center（现代标准）
子项伸缩别只写 flex: 1，得补 -webkit-box-flex: 1 和 -webkit-flex: 1，否则 X5 下子元素宽度可能为 0。
为什么 autoprefixer 比手写前缀更可靠
手写容易翻车：比如硬编码 -ms-flexbox，但现代 Edge 已不需要；更糟的是 gap、aspect-ratio 这类新属性，手写根本覆盖不到。
autoprefixer 会根据 browserslist 自动查 Can I Use 数据补全，但配置必须精确：
- 不能只写
last 2 versions——它默认不含 iOS 10 - 要显式写
ios < 11或and_qq >= 6.12（X5 内核版本）
loader 顺序必须是：less-loader → postcss-loader → css-loader，否则 @import 或变量可能被跳过，前缀补不全。
viewport 和图片渲染必须硬编码
微信会劫持 <meta name="viewport">，删参数、重设缩放，导致图片左右留白不均或模糊；它还跳过 srcset 和 sizes，只取 <img src> 的第一个值。
必须写死 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
图片要加内联样式防拉伸：
<img src="..." style="max-width: 90%; height: auto;">- 高清图别依赖
srcset，直接提供 2x 尺寸的src，或用<picture>+<source>fallback 到<img src> - 背景图偏移？改用
<img>替代background-image，或用object-fit: cover+position: absolute模拟
真机测试必须用文件传输助手发本地 index.html，开发者工具模拟不了 X5 的实际渲染链路——这点最容易被忽略，也是多数线上问题复现不出的根本原因。
