必须双重验证X5内核：/MicroMessenger/i.test(navigator.userAgent)为真且/MQQBrowser/\d+.\d+/i.test(navigator.userAgent)或typeof window.X5JSSDK!=='undefined'成立，再封装isWechatInX5()函数触发降级；Flex需严格按顺序声明display:-webkit-box;-webkit-flex;-ms-flexbox;flex，并配对-webkit-box-align、-webkit-flex等旧属性。
国产手机浏览器（尤其是微信 X5、QQ 浏览器、UC、vivo 等）内核版本滞后，flex 或 grid 布局常因前缀缺失、解析偏差或层叠上下文干扰导致视觉偏离——这不是 CSS 写错了，而是渲染引擎根本不认识你写的现代声明。
识别是否运行在 X5/旧内核环境
别只看 navigator.userAgent 里有没有 MicroMessenger，X5 内核会伪造 Chrome 版本号，必须双重验证：
-
/MicroMessenger/i.test(navigator.userAgent)为真 - 同时满足
/MQQBrowser\/\d+\.\d+/i.test(navigator.userAgent)或typeof window.X5JSSDK !== 'undefined'
封装成 isWechatInX5() 后再做降级，否则在 iOS Safari 或 Chrome 里也会白跑一堆 -webkit- 规则。
Flex 布局失效时必须补全的四重 display 声明
X5 对 display: flex 的支持是碎片化的：iOS 8 只认 display: -webkit-box，Android X5 早期版本甚至不支持 -webkit-flex。漏掉任意一环，容器就塌陷为 display: block。
立即学习“前端免费学习笔记（深入）”；
- 顺序不能错：
display: -webkit-box;→display: -webkit-flex;→display: -ms-flexbox;→display: flex; - 对齐属性也得配对：
-webkit-box-align: center;+-webkit-align-items: center;+align-items: center; - 子项伸缩写
flex: 1不够，得加-webkit-box-flex: 1;和-webkit-flex: 1;
Fixed 定位在 X5 里偏移的真正原因
不是 top 值没生效，而是父级 transform、filter 或 opacity: 0.99 创建了新包含块，让 position: fixed 相对于父容器而非视口——X5 尤其容易在此处出错，且 DevTools 的 Computed 面板未必准确显示 Containing Block。
- 用
document.body.appendChild(fixedEl)把元素提至<body>直接子级，绕过所有干扰父容器 - 避免给
<html>或<body>加transform或will-change，它们在 X5 中极易触发意外层叠上下文 - 横屏切换后手动重置坐标：
fixedEl.style.top = window.innerHeight * 0.1 + 'px';，比依赖 CSS 更可靠
媒体查询在 X5 里不触发的替代方案
window.matchMedia("(max-width: 768px)").addEventListener("change", ...) 在部分 X5 版本中不可靠；resize 事件在微信里基本不触发，尤其键盘弹起后。
- 改用
window.matchMedia("(orientation: portrait)").addEventListener("change", ...)，这是目前最稳定的监听方式 - 页面加载后立即执行一次判断：
handleOrientation(window.matchMedia("(orientation: portrait)").matches) - 避免依赖
vh/vw：X5 对动态视口单位支持差，100vh在横屏时可能远超实际高度，改用 JS 动态设置根字号：document.documentElement.style.fontSize = window.innerWidth / 375 * 100 + 'px';
真正麻烦的不是写多少兼容代码，而是国产浏览器会悄悄修改 DOM 结构（比如把 <img> 包进匿名 div）、劫持 getComputedStyle 返回值、甚至忽略 !important —— 所以关键交互层（如弹窗、导航栏）建议直接用 style 内联控制，兜底比猜它支持什么更省心。
