根本原因是微信X5内核错误解析@-ms-viewport导致视口缩放失常，删掉或覆盖为@-ms-viewport{width:auto!important}可修复；同时需分平台处理text-size-adjust失效和100vh不准问题。
微信内置浏览器缩放失常，根本不是 CSS 写错了，而是它对 viewport、text-size-adjust 和视口单位（如 vh）的解析与标准浏览器存在系统性偏差——尤其在 Android X5 内核上，@-ms-viewport 会被误触发，100vh 会包含地址栏高度，用户调大字体还会强制放大文本而不重排布局。
为什么去掉 Bootstrap 的 @-ms-viewport 就正常了
Bootstrap v3.3.4 中的 @-ms-viewport { width: device-width; } 在微信 Android（X5 内核）里会被错误识别并强制应用，导致页面以更高 DPR 渲染（比如把 320px 视口当成 480px），所有相对尺寸被拉伸，文字和间距集体“缩水”。这不是 bug 是设计缺陷——X5 把这个 IE 专属规则当真了。
- 必须删掉或覆盖该规则：
@-ms-viewport { width: auto !important; } - 更稳妥的做法是：在引入 Bootstrap 前，用
覆盖 - 新版 Bootstrap（v4+）已移除该声明，但历史项目升级前务必检查
text-size-adjust 失效的真正原因
iOS 微信用 WKWebView，Android 微信用 X5，两者对 text-size-adjust 的支持程度不同：iOS 支持 -webkit-text-size-adjust: 100%，但 Android X5 完全忽略它；而用户在微信「设置 → 通用 → 字体大小」里调大后，只有文本放大，px、rem、vh 全部不动，造成文字溢出、按钮错位。
- 全局加这三行才有效：
body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } - 但注意：X5 下仍可能部分失效，此时需降级策略——对关键文本容器加
font-size: 1em配合line-height固定值，避免继承缩放 - 别用
none，它会让 iOS VoiceOver 读屏失效，不符合无障碍要求
100vh 在微信里为什么总差一截
微信 Android 的 X5 内核把 window.innerHeight 算成「可视区域 + 地址栏临时高度」，且键盘弹出时不会实时更新；iOS 微信虽用 WKWebView，但底部「小白条」和 Safari 的安全区逻辑不一致，100vh 会撑满整个屏幕，内容被遮挡。
- 必须用 JS 动态计算：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 监听
resize和scroll（X5 中resize不稳定，scroll更可靠） - 补上安全区：
padding-bottom: env(safe-area-inset-bottom)，否则 iOS 底部操作按钮会被「小白条」盖住
最易被忽略的是：这些修复必须按环境精准触发。直接全局写 -webkit-box 或 @-ms-viewport 会污染 Chrome/Safari；而漏掉 X5 的 isWechatInX5() 判断，就等于在现代浏览器里硬塞一套过期内核的补丁——问题没解决，反而埋下新坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
