微信X5内核需精准识别并针对性适配：通过双重UA检测或X5JSSDK判断，强制viewport、禁用srcset、避免flex混用浮动、修复requestAnimationFrame节流及canvas黑屏问题。
微信内置浏览器不是“不兼容 HTML”，而是它用的不是标准 Chrome 或 Safari——安卓上跑的是腾讯 X5 内核（版本滞后、定制多），iOS 上虽用 WKWebView 但加了大量拦截逻辑。很多问题不是代码写错了，是没踩对它的运行节奏和限制边界。
怎么准确判断当前在微信 X5 内核里运行
只靠 navigator.userAgent 包含 MicroMessenger 不够可靠：安卓微信常伪装成 MQQBrowser/6.2，部分低版本甚至不带 QQBrowser 字样。真正在 X5 上跑，必须同时满足两个条件：
-
/MicroMessenger/i.test(navigator.userAgent)为 true -
/QQBrowser\/\d+\.\d+/i.test(navigator.userAgent)或typeof window.X5JSSDK !== 'undefined'为 true
建议封装成函数：isWechatInX5()，后续所有 polyfill、降级逻辑都基于这个判断触发，别在非 X5 环境里白跑兼容代码。
viewport 和图片渲染必须硬编码
微信会劫持 <meta name="viewport">，删掉参数、重设缩放，导致图片左右留白不均或模糊。它还跳过 srcset 和 sizes，只取 <img src> 的第一个值。
立即学习“前端免费学习笔记（深入）”；
- 必须写死：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，少一个都可能被干预 -
<img>标签要加style="max-width: 90%; height: auto;"，别只靠 CSS 类控制 - 高清图别依赖
srcset，直接提供 2x 尺寸的src，或用<picture>+<source>fallback 到<img src> - 背景图偏移？改用
<img>替代background-image，或用object-fit: cover+position: absolute模拟
flex 布局对齐失效的典型原因
不是微信不支持 display: flex，是旧版 X5 对默认值处理异常：比如 align-items: stretch 把图片拉变形，flex-direction: column 下子元素高度塌陷，或者嵌套了 table 或浮动后整个 flex 容器失灵。
- 显式声明
align-items和justify-content，别依赖默认值 - 给图片加
max-width: 100%和height: auto，防止父容器 flex 拉伸时失真 - 避免在 flex 容器里混用
float、display: table或position: absolute元素 - 测试必须用真机 + 文件传输助手发本地
index.html，开发者工具模拟不了真实渲染链路
requestAnimationFrame 和 Canvas 动画卡顿修复
X5 对 requestAnimationFrame 做了重度节流，尤其切后台再切回来时，帧率常掉到 10–15fps；Canvas 则容易黑屏、闪烁或 toDataURL() 返回空字符串。
- 不用
transform: translateZ(0)，改用transform: translate3d(0, 0, 0)强制硬件加速 - 动画开始前加
if (document.hidden) return，防止切页后继续消耗 CPU - 每次修改
canvas.width或canvas.height后，必须手动调用ctx.clearRect(0, 0, canvas.width, canvas.height) -
canvas.toDataURL('image/webp')在安卓 X5 上基本不可用，统一 fallback 到image/png
最易被忽略的一点：X5 渲染极快，但 DOM 构建可能滞后，document.body 在页面初始化时经常为 null。别直接 document.body.appendChild，改用 DOMContentLoaded 或 document.addEventListener('pageshow', ...) 触发时机更稳。
