uni-app如何应对H5端在特定浏览器下的100vh适配

作者：袖梨 2026-07-02

iOS Safari中100vh“缩水”是因地址栏动态变化导致视口高度重算而uni-app未实时感知，应使用uni.getSystemInfoSync()动态获取windowHeight并减去导航栏高度来适配。

为什么H5端100vh在iOS Safari里会“缩水”

不是你CSS写错了，是iOS Safari对vh的实现本身就有缺陷：地址栏收起/展开时会动态重算100vh，但uni-app加载时只读了一次window.innerHeight，后续变化它不感知。结果就是页面刚打开时正常，一滚动或切横屏，高度突然塌陷、底部留白、scroll-view撑不满。

用`uni.getSystemInfoSync()`动态设高度最稳

别依赖CSS里的100vh，直接用JS获取真实可用视口高度，再绑定到元素上。这是目前H5端兼容性最好的方案。

uni.getSystemInfoSync()返回的windowHeight是纯内容区高度，不含地址栏、状态栏等干扰
必须在onLoad和onShow里都调一次，因为部分安卓机型切页后windowHeight不刷新
如果页面含自定义导航栏或tabbar，需额外减去对应高度（如88rpx或100rpx），不能只靠100vh硬减

示例：

export default {  data() {    return { windowHeight: 0 }  },  onLoad() {    this.setPageHeight()  },  onShow() {    // 防止切页后高度失效    setTimeout(() => this.setPageHeight(), 100)  },  methods: {    setPageHeight() {      const info = uni.getSystemInfoSync()      this.windowHeight = info.windowHeight - 88 // 减去自定义顶部tab高度    }  }}

...

禁用`vh`适配，改用`rem` + 动态根字号

如果你的项目大量用了rpx或rem，且需要横竖屏平滑切换，直接关掉uni-app默认的vh基准更彻底。

在manifest.json里确认没开viewport相关自动适配（尤其避免"scale": true）
在App.vue中手动设置document.documentElement.style.fontSize，用window.innerHeight / 10 + 'px'作为1rem基准
必须监听resize和orientationchange，但iOS Safari触发滞后，得套一层setTimeout延时更新
注意：scroll-view内部若用vh单位，依然会塌，得统一改成rem或px

条件编译下H5端慎用`calc(100vh - Xpx)`

很多人想用CSS减法“修”高度，比如height: calc(100vh - 44px)，但在H5端这招容易翻车。

iOS Safari里100vh本身就不稳定，再减固定像素，误差会放大
不同机型状态栏、地址栏高度不一致（比如iPhone 14 Pro和SE差20px以上），硬编码44px或50px不可靠
条件编译#ifdef H5能隔离平台，但不能解决vh本身的计算缺陷
真要用calc，至少配合env(safe-area-inset-bottom)和--status-bar-height变量，但这些仅对安全区有效，不解决主视口塌陷