uni-app如何修复H5端移动浏览器中的高度塌陷 uni-app视口适配方法【解决】

作者：袖梨 2026-07-29

uni-app H5端页面高度塌陷源于iOS Safari对vh的动态重算，应禁用vh适配，改用rem+动态监听resize/orientationchange并延时更新根字体大小，避免依赖window.innerHeight即时值。

uni-app H5端页面高度塌陷的常见表现

打开H5页面后，page 或 view 内容没撑开，底部留白、滚动条失效、vh 计算错乱——这不是 CSS 写错了，是移动端浏览器（尤其 iOS Safari）对 vh 的实现不一致导致的。iOS Safari 在地址栏收起/展开时会动态重算 vh，但 uni-app 默认用的是 vh 做视口基准，结果就是“高度突然缩水”。

在 uni-app 中关闭 `vh` 适配，改为使用 `px` + 动态计算

uni-app 的 vue.config.js 或者 manifest.json 中默认启用 viewport 适配，它会将 750rpx 转换为 100vw，但 vw 又依赖 vh 行为，因此无法绕过塌陷。最可靠的办法是将其关闭，改由手动接管：

在 manifest.json 中配置 "display":"standalone"（并非必需，但可以降低 Safari 地址栏的干扰）

在 main.js 或 App.vue 的 onLaunch 中执行：

const doc = document.documentElement;doc.style.fontSize = window.innerHeight / 10 + 'px'; // 把 100vh 拆成 10 份，1rem ≈ 10vh

所有布局单位统一换成 rem，例如 height: 10rem ≈ 满屏高度；不要直接使用 height: 100vh

iOS Safari 下 `window.innerHeight` 不稳定时如何处理

直接读取 window.innerHeight 时，iOS Safari 在页面初次载入或地址栏变化后经常更新滞后，例如横竖屏切换完成，数值仍是旧值。因此不能只在 onload 时赋值一次。

应监听 resize 与 orientationchange 事件，但需要注意 iOS Safari 的 resize 可能无法及时触发

更稳妥的做法是加一个 setTimeout 延迟重算，例如：

function updateRootFontSize() {  setTimeout(() => {    const h = window.innerHeight || document.documentElement.clientHeight;    document.documentElement.style.fontSize = h / 10 + 'px';  }, 100);}window.addEventListener('resize', updateRootFontSize);window.addEventListener('orientationchange', updateRootFontSize);