微信浏览器页面变形主因是x5内核解析差异，需用iswechatinx5()双重判断（micromessenger存在且mqqbrowser匹配或x5jssdk定义），再针对性兼容：四重display声明、配对对齐属性、js动态设--vh替代100vh。
微信浏览器里页面变形，八成不是你 CSS 写错了，而是 X5 内核压根没按你写的逻辑渲染——它不认识 100vh、跳过 flex 声明、把 @media (orientation: landscape) 当耳旁风，甚至给 fixed 元素偷偷换了个父容器。
怎么确认是不是 X5 内核在捣鬼
别信 navigator.userAgent 里有没有 MicroMessenger，它常伪造 Chrome 版本号，还可能漏掉 QQBrowser 字样。必须双重验证：
-
/MicroMessenger/i.test(navigator.userAgent)为true - 同时满足：
/MQQBrowser\/\d+\.\d+/i.test(navigator.userAgent)或typeof window.X5JSSDK !== 'undefined'
封装成 isWechatInX5() 后再做降级，否则 Chrome 里也会白跑一堆 -webkit- 规则。
100vh 失效导致首屏留白或内容被截
微信 X5 用的是布局视口（layout viewport）算 100vh，不是你当前看到的高度。地址栏收起、键盘弹出、横竖屏切换，100vh 都不会重算。
- 安卓和旧版 iOS 微信不支持
100dvh，@supports (height: 100dvh)直接 fallback，不触发降级 - 不能只写
height: 100vh; height: 100dvh;——后者会被前者覆盖（老内核跳过不认识的声明，但保留前面的） - 推荐 JS 动态注入：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，再用min-height: calc(var(--vh, 1px) * 100) - 必须监听
resize、scroll（iOS 地址栏收起时仅触发 scroll）、以及WeixinJSBridge就绪事件
Flex 布局塌陷或子项不伸缩
X5 对 display: flex 的支持是碎片化的：iOS 8 只认 display: -webkit-box，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; - 子项写
flex: 1不够，必须补-webkit-box-flex: 1;和-webkit-flex: 1;，否则宽度为 0 - autoprefixer 比手写前缀更可靠，但
browserslist要精确到内核版本，比如ios_saf >= 10、and_qq >= 10，不能只写last 2 versions
横屏后样式错乱或 fixed 元素偏移
@media (orientation: landscape) 在微信里基本不可靠；position: fixed 的偏移也不是 top 没生效，而是父级 transform、filter 或 opacity: 0.99 创建了新包含块，让 fixed 相对于父容器而非视口。
- 横屏断点别只靠
orientation，改用真实瓶颈条件：@media (max-height: 480px) and (min-width: 640px)或@media (min-aspect-ratio: 13/9) - fixed 元素偏移时，优先用
document.body.appendChild(fixedEl)提至直接子级，绕过所有干扰父容器 - 避免给
或加transform或will-change，它们在 X5 中极易触发意外层叠上下文 - 横屏后手动重置坐标比依赖 CSS 更可靠：
fixedEl.style.top = window.innerHeight * 0.1 + 'px';
最易被忽略的一点：X5 渲染延迟高，CSS 规则写了≠生效。哪怕媒体查询命中、JS 设置了变量、DOM 结构也正确，仍可能因重排未触发而视觉错位——必须配合 requestAnimationFrame 主动干预，而不是等浏览器“想起来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
