100vh在微信中留白或截断，是因为x5内核将其绑定到静态布局视口而非动态可视区域，且不响应导航栏/键盘变化；安卓旧版x5不支持100dvh，@supports会直接fallback，声明顺序不当还易被100vh覆盖。
为什么直接写 100vh 在微信里会留白或截断
微信 X5 内核（尤其是安卓）把 100vh 绑定到「布局视口」而非「可视区域」，而微信导航栏、iOS 地址栏收起/展开都会动态改变可视高度，100vh 却不重算。结果就是：首屏多出空白、底部内容被遮、滚动时突然跳动。
别指望 100dvh 一劳永逸——微信 iOS ≥ 8.0.49 才支持，安卓 X5 内核（如 v6.x/v7.x）压根不认这个单位，@supports (height: 100dvh) 直接 fallback，还可能因声明顺序被 100vh 覆盖。
实操建议：
- 用 JS 动态注入 CSS 变量：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 必须监听三个事件：
resize（横竖屏）、scroll（iOS 地址栏收起仅触发 scroll）、WeixinJSBridgeReady（确保 X5 环境就绪） - 防抖用
requestAnimationFrame，不是setTimeout；安卓下resize触发极快，节流不当会导致高度卡死 - CSS 中统一写：
min-height: calc(var(--vh, 1px) * 100)，不依赖父级是否设了height: 100%
Flex 布局在微信里失效，该补哪几行 display
X5 对 display: flex 的支持是碎片化的：iOS 8 只认 display: -webkit-box，iOS 9–10 需要 -webkit-flex，Android X5 早期版本连 -webkit-flex 都不全支持。只写 display: flex 在 X5 上等于没写。
顺序不能错，浏览器按顺序取第一个能识别的值：
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
对齐和子项伸缩也得配对补全：
-
align-items: center必须配-webkit-box-align: center和-webkit-align-items: center，缺前者在 iOS 8 下无效 -
flex: 1得补-webkit-box-flex: 1和-webkit-flex: 1，否则 X5 下子元素宽度为 0 - 别信 autoprefixer 默认配置——
browserslist必须精确到内核版本，比如写ios 10，不能只写last 2 versions
字体被微信放大导致布局崩坏，怎么锁死
微信允许用户通过系统设置或关怀模式调整字体大小，这会直接破坏基于 rem、vw 的响应式体系。iOS 和 Android 处理机制不同：iOS 通过 -webkit-text-size-adjust 控制，Android 则依赖 WeixinJSBridge 接口拦截。
纯 CSS 锁定只对 iOS 有效：
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
Android 必须配合 JS：
- 页面加载后立即调用
WeixinJSBridge.invoke('getNetworkType')触发环境就绪 - 监听
WeixinJSBridge.on('menu:setfont', () => { /* 重置字号逻辑 */ })拦截用户调整行为 - 避免在
DOMContentLoaded前执行，否则WeixinJSBridge可能未定义
图片错位、模糊、背景图偏移，根源在哪
微信会强制重设 <meta name="viewport">，并劫持 <img> 加载逻辑：跳过 srcset 和 sizes，只取第一个 src；background-image 在 iOS 微信里常因视口计算偏差发生裁切。
关键实操点：
-
<meta>必须写死：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，少一个参数都可能触发微信自作主张 - 图片用
<img src="" style="max-width:90%">，别只写max-width: 100% - 需要响应式背景图？改用
<picture></picture>+<source media></source>，微信至少能 fallback 到<img src> - 慎用
position: fixed——微信是靠 JS 模拟固定定位，一旦页面有iframe或input聚焦，就容易卡住或错位
最易被忽略的是真机验证环节：开发者工具模拟完全不还原 X5 渲染链路，必须用「文件传输助手」发本地 index.html 到微信，手动刷新后测试。X5 的 bug 常在特定机型+微信版本组合下才暴露，比如华为某型号软键盘弹起时 window.innerHeight 缩小 287px，而 OPPO 同样操作只缩 120px——这种差异没法靠通用代码覆盖，只能靠真实环境抓取日志定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
