微信内置浏览器布局错乱本质是x5与wkwebview内核解析差异，需用iswechatinx5()精准判断并针对性兼容：四重display声明、配对对齐属性、js动态设--vh变量替代100vh。
微信内置浏览器布局错乱，本质是X5和WKWebView内核解析不一致
不是样式写错了，而是同一段CSS在安卓X5内核和iOS WKWebView（加JS拦截）里被不同方式解析。比如display: flex在X5上可能完全被忽略，100vh算的是布局视口而非可视区域，flex-shrink: 1在某些X5版本里会把按钮压成一条线——这些都不是bug，是内核能力差异。
必须用isWechatInX5()精准判断，别只靠navigator.userAgent.includes('MicroMessenger')
安卓微信常伪装成MQQBrowser/6.2，部分低版本甚至不带QQBrowser字样；iOS虽用WKWebView，但关键锚点是window.X5JSSDK是否存在。手写判断必须同时满足：
/MicroMessenger/i.test(navigator.userAgent)/QQBrowser\/\d+\.\d+/i.test(navigator.userAgent) || typeof window.X5JSSDK !== 'undefined'
所有兼容逻辑（比如注入-webkit-前缀、动态设--vh）都得包在这个函数里触发，否则Chrome里也跑一堆无效规则。
Flex容器失效？四重display声明+配对align-items才生效
X5对Flex的支持是碎片化的：iOS 8只认display: -webkit-box，iOS 9–10要-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，否则宽度为0。
高度不准别硬扛100vh，用JS动态设--vh变量
100vh在微信里不准，是因为X5按布局视口计算，且不随地址栏收起/键盘弹出重算。哪怕微信iOS ≥ 8.0.49支持100dvh，安卓X5仍大概率fallback——而且height: 100vh; height: 100dvh;写法会让老内核直接跳过后者，保留错误值。
稳妥做法是用JS读真实高度并注入CSS变量：
function setVh() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
setVh();
window.addEventListener('resize', () => requestAnimationFrame(setVh));
window.addEventListener('scroll', () => requestAnimationFrame(setVh));
if (window.WeixinJSBridge) WeixinJSBridge.invoke('getNetworkType', setVh);
CSS里统一用min-height: calc(var(--vh, 1px) * 100)，再配合padding-bottom: env(safe-area-inset-bottom)防底部遮挡。真机测试时记得用文件传输助手发index.html，开发者工具模拟不出X5的实际渲染链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
