微信浏览器 viewport 异常主因是 X5 内核解析严格且会干预属性，需显式声明 width=device-width、慎用 user-scalable/no 和 maximum-scale；配合 x5-orientation 等私有 meta 控制行为，小字号用 rem 或 transform 绕过系统限制，JSBridge 调用须监听 WeixinJSBridgeReady 事件。
微信浏览器不认 viewport 的常见表现
页面在微信里缩放异常、文字忽大忽小、布局错位，大概率不是 CSS 写错了，而是 <meta name="viewport"> 没写对或被覆盖了。微信内置的 X5 内核（尤其旧版本）对 viewport 解析比 Chrome 更严格，且会主动干预部分属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式声明
width=device-width，不能只写initial-scale=1 - 避免使用
user-scalable=no—— 微信 8.0+ 会直接忽略，但老版本可能触发强制重排 - 慎用
maximum-scale=1，它会让双击放大失效，且在 iOS 微信中可能导致 input 失焦后键盘收起异常 - 如果页面需横屏支持，
viewport无法解决，得靠 CSS@media (orientation: landscape)+ JS 监听window.orientation或screen.orientation
微信特有的 webview meta 标签
微信提供了几个非标准但实际生效的 <meta>，用于控制 webview 行为，比如禁止下拉刷新、隐藏右上角菜单等。这些标签只在微信环境起作用，其他浏览器完全无视。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用下拉刷新：加
<meta name="x5-orientation" content="portrait">（仅限竖屏）或<meta name="x5-fullscreen" content="true">（全屏模式下自动禁用） - 强制竖屏渲染（防横屏错乱）：
<meta name="x5-orientation" content="portrait">，注意它不阻止用户旋转手机，只影响 webview 渲染方向 - 关闭 QQ/微信 自动识别手机号：
<meta name="format-detection" content="telephone=no">，否则 iOS 微信会把数字串包成<a href="tel:...">，破坏样式和点击逻辑 -
<meta name="x5-page-mode" content="app">可启用应用式体验（无地址栏），但仅对已配置业务域名的公众号网页有效，否则无效
微信中 font-size 12px 以下显示异常的原因
iOS 微信默认开启「最小字体保护」，font-size: 10px 在 CSS 里写了，实际渲染仍为 12px。这不是 bug，是系统级限制，连 -webkit-text-size-adjust: none 都压不住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用 rem/vw 单位做缩放，配合根元素动态设置，绕过绝对像素限制
- 如必须显示小字号（如辅助文案），用
transform: scale(0.8)缩放整个文字容器，再反向 translate 修正位置 - 避免在
<button>或<input>上设超小 font-size —— 微信会额外放大以保证可点击性，导致视觉错位 - 测试时务必真机截图，模拟器和 Chrome DevTools 的「iPhone 模式」不触发该限制
微信 JSBridge 未就绪时调用 API 报错 JSBridge is not defined
这个错误不是你代码写错了，是微信 JSBridge 对象还没注入完成就执行了 WeixinJSBridge.invoke 类调用。尤其在单页应用（SPA）里，路由切换后立即调用分享接口，极易命中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远不要直接调用
WeixinJSBridge，先用document.addEventListener('WeixinJSBridgeReady', ...)等待就绪 - 兼容写法：检查
typeof WeixinJSBridge !== 'undefined'，再 fallback 到事件监听 - SPA 场景下，每次需要调用前都应重新注册 ready 事件，不能只在页面加载时绑一次
- 注意：iOS 和 Android 的 JSBridge 就绪时机不同，Android 可能更慢，别依赖 setTimeout 做“差不多行了”的判断
微信的 meta 标签和 JSBridge 行为差异，基本都藏在 X5 内核版本和系统平台组合里。没真机测过 iOS 微信 8.0.33 + iPhone 12 和安卓微信 8.0.45 + 小米 13，就别急着说“适配完了”。
