uni-app IOS H5页面上下滑动时tabbar与浏览器底部之间出现空挡

这是一个典型的 iOS Safari 浏览器视口高度动态变化导致的布局问题。当 Safari 的底部工具栏（或顶部地址栏）在滚动时显示或隐藏，会改变 window.innerHeight 的值，而固定定位（position: fixed）的元素是基于视口（viewport）定位的。如果页面布局没有及时响应这个高度变化，就会出现您描述的“空挡”。

核心原因：100vh 或 fixed 定位的 tabbar 没有适配 Safari 动态视口。

解决方案：

1. 使用 env(safe-area-inset-bottom) 和动态视口单位 这是最推荐的方法。将 tabbar 的样式调整为：

   .tabbar {
     position: fixed;
     bottom: 0;
     /* 关键：使用 calc 结合 env 安全区域，并优先使用 dvh */
     height: 50px; /* 您的tabbar高度 */
     padding-bottom: env(safe-area-inset-bottom);
     width: 100%;
     box-sizing: content-box; /* 确保padding计入高度 */
   }
   

   同时，确保页面容器（如 #app 或页面根元素）的最小高度使用动态视口单位：

   page {
     /* 使用 dvh (Dynamic Viewport Height) 或 svh (Small Viewport Height) */
     min-height: 100dvh; /* 首选 */
     /* 或 min-height: 100svh; */
     /* 传统写法，兼容性稍差，但能解决部分问题 */
     /* min-height: -webkit-fill-available; */
   }
   

2. 在 Uni-app 中全局处理（推荐） 在 App.vue 的 <style> 中全局设置：

   /* 设置页面根节点高度为动态视口高度 */
   page {
     min-height: 100dvh;
   }
   /* 如果您的tabbar是uni-app原生组件，它通常已处理安全区域。*/
   /* 如果是自定义tabbar，确保其样式包含上述的 padding-bottom: env(safe-area-inset-bottom); */
   

3. JavaScript 动态调整（备选） 如果 CSS 方案仍有问题，可以在 onPageScroll 等生命周期中，监听窗口变化并调整：

   export default {
     data() {
       return {
         windowHeight: 0
       }
     },
     onLoad() {
       this.windowHeight = window.innerHeight;
       window.addEventListener('resize', this.handleResize);
     },
     onUnload() {
       window.removeEventListener('resize', this.handleResize);
     },
     methods: {
       handleResize() {
         // 在 Safari 工具栏显示/隐藏时，innerHeight 会变化
         this.windowHeight = window.innerHeight;
         // 可以在此处强制更新某个元素的高度或位置
         // 例如：document.querySelector('.tabbar').style.bottom = '0';
       }
     }
   }