必须同时满足/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 版本中等于没写。
对齐属性也必须配对：
-
-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。
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
为什么 autoprefixer 比手写前缀更可靠
手写容易翻车：比如硬编码 -ms-flexbox，但现代 Edge 已不需要；更糟的是 gap、aspect-ratio 这类新属性，手写根本覆盖不到。
autoprefixer 会根据 browserslist 自动查 Can I Use 数据补全，但配置必须精确：
- 不能只写
last 2 versions——它默认不含 iOS 10 - 要显式写
ios 或 <code>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%">- 高清图别依赖
srcset，直接提供 2x 尺寸的src，或用<picture></picture>+<source></source>fallback 到<img src> - 背景图偏移？改用
<img>替代background-image，或用object-fit: cover+position: absolute模拟
真机测试必须用文件传输助手发本地 index.html，开发者工具模拟不了 X5 的实际渲染链路——这点最容易被忽略，也是多数线上问题复现不出的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
