100vh在微信中失效是因为x5内核（尤其安卓）按布局视口而非可视区域计算，不随导航栏/地址栏变化重算，导致留白或截断；必须用iswechatinx5()精准识别内核，动态注入--vh变量并监听resize、scroll、weixinjsbridgeready事件，配合四重display声明及配对旧版flex属性才能可靠兼容。
直接写 100vh 或只加 display: flex 在微信里大概率失效，必须分层识别 X5 内核、动态注入高度变量、补全四重 display 声明，缺一不可。
为什么 100vh 在微信里会留白或截断
微信 X5 内核（尤其是安卓）把 100vh 绑定到「布局视口」而非当前可视区域，而微信导航栏、iOS 地址栏收起/展开都会改变可视高度，100vh 却不重算。结果就是：首屏多出空白、底部内容被遮、滚动时突然跳动。
-
100dvh不是银弹：微信 iOS ≥ 8.0.49 才支持，安卓 X5 内核（如 v6.x/v7.x）压根不认，@supports (height: 100dvh)会直接 fallback - 声明顺序错误会导致降级失败：如果
height: 100vh写在height: 100dvh前面，老内核跳过后者但保留前者，反而覆盖了本该生效的现代值 - 不监听
scroll事件——iOS 地址栏收起仅触发scroll，不处理就会卡在旧高度
怎么用 JS 动态注入 --vh 并防抖
绕过内核差异最稳妥的方式，是读取真实 window.innerHeight 并注入 CSS 变量，但必须应对微信特有的触发时机和节流陷阱。
- 必须监听三个事件：
resize（横竖屏）、scroll（iOS 地址栏变化）、WeixinJSBridgeReady（确保 X5 环境就绪） - 防抖必须用
requestAnimationFrame：安卓 X5 下resize触发极快且无规律，用setTimeout节流容易导致高度卡死 - CSS 中统一写
min-height: calc(var(--vh, 1px) * 100)，不依赖父级是否设了height: 100% - 初始化要放在
DOMContentLoaded后立即执行，避免白屏或闪动
Flex 布局在 X5 上失效时该补哪几行 display
X5 对 display: flex 的支持是碎片化的：iOS 8 只认 display: -webkit-box，iOS 9–10 需要 display: -webkit-flex，Android X5 早期版本连 -webkit-flex 都不全支持。只写 display: 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
怎么准确判断当前运行在微信 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-规则 -
autoprefixer配置browserslist必须精确到内核版本，比如写ios_saf >= 10、and_qq >= 10，不能只写last 2 versions
真正麻烦的不是某一行代码写错，而是 X5 内核对「标准」的实现是分版本、分平台、分渲染阶段的——同一段 JS 在 resize 时算准了高度，scroll 时却没更新；同一套 Flex 声明在 iOS 10 有效，在安卓 X5 v6.8 就漏掉第一行导致整个容器不渲染。这些细节不串起来验证，光改 CSS 或光调 JS 都只是在打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
