微信内置浏览器 H5 调试

微信内置浏览器（iOS 上是 WKWebView，安卓上是 X5 内核）和普通浏览器有三个关键差异，是 H5 适配最常见的坑。

第一，顶部被微信导航栏占用。iPhone X 系列在微信内打开 H5，可视区高度只有 724pt，比 Safari 里少 78pt。如果你的页面用了 height: 100vh 布局，会出现内容被截断。

第二，底部有安全区。iPhone 上有约 34pt 的底部安全区，安卓机型在 24-48pt 之间波动。必须用 env(safe-area-inset-bottom) 而不是固定像素，否则在部分安卓机型上会被 Home Indicator 遮挡。

第三，X5 内核的渲染差异。安卓微信用的 X5 内核（基于 Chromium 57），对 flexbox 的部分属性支持和最新 Chrome 有差异，gap 属性在老版本 X5 上无效，需要用 margin 兼容。

在下方预览器输入你的网址，同时对比微信 iPhone 竖屏、横屏和安卓版，能立刻看出 H5 在微信内的适配问题。

常见问题

微信内置浏览器和普通浏览器有什么区别？

主要三点：顶部被微信导航栏占用（高约 78pt），底部有安全区（约 34pt），安卓用 X5 内核而非最新 Chrome，部分 CSS 属性支持有差异。

H5 在微信里怎么适配底部安全区？

用 env(safe-area-inset-bottom) 环境变量。固定像素会失败，因为不同安卓机型的安全区高度不同（24-48pt 波动）。

微信 X5 内核不支持 flex gap 怎么办？

用 margin 模拟。比如 .item:not(:last-child) { margin-right: 10px; }，兼容所有版本。

微信内 100vh 布局会被截断吗？

会。微信顶部导航栏占用了视口高度但 100vh 不算它，实际可视高度约 724pt。改用 100% 或 calc(100vh - 78px)。