uni-app 安卓微信h5视频全屏退出后tabbar与系统导航条重叠

在 uni-app 中，当在安卓微信 H5 页面中播放视频并全屏后，退出全屏时可能会出现 tabbar 与系统导航条重叠的问题。这个问题通常是由于全屏播放视频时，系统导航条被隐藏，退出全屏后导航条重新显示，但页面布局没有及时调整导致的。

解决方案

1. 监听全屏事件并调整布局

   你可以通过监听视频的全屏事件，在退出全屏时手动调整页面布局，确保 tabbar 不会与系统导航条重叠。

   export default {
     data() {
       return {
         isFullScreen: false
       };
     },
     methods: {
       handleFullScreenChange(event) {
         this.isFullScreen = event.detail.isFullScreen;
         if (!this.isFullScreen) {
           // 退出全屏时，手动调整布局
           this.adjustLayout();
         }
       },
       adjustLayout() {
         // 根据实际情况调整布局
         // 例如，设置页面 paddingBottom 或 marginBottom
         const tabbarHeight = 50; // 假设 tabbar 高度为 50px
         document.body.style.paddingBottom = `${tabbarHeight}px`;
       }
     },
     mounted() {
       const videoElement = document.querySelector('video');
       if (videoElement) {
         videoElement.addEventListener('fullscreenchange', this.handleFullScreenChange);
       }
     },
     beforeDestroy() {
       const videoElement = document.querySelector('video');
       if (videoElement) {
         videoElement.removeEventListener('fullscreenchange', this.handleFullScreenChange);
       }
     }
   };
   

2. 使用 viewport-fit=cover

   在 index.html 中，确保 meta 标签的 viewport 设置正确，使用 viewport-fit=cover 可以避免页面内容被系统导航条遮挡。

   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   

3. 使用 env(safe-area-inset-bottom)

   如果你使用的是 CSS 来布局 tabbar，可以使用 env(safe-area-inset-bottom) 来避免与系统导航条重叠。

   .tabbar {
     padding-bottom: env(safe-area-inset-bottom);
   }
   

4. 动态计算 tabbar 位置

   在退出全屏时，动态计算 tabbar 的位置，确保它不会与系统导航条重叠。

   adjustLayout() {
     const safeAreaBottom = window.innerHeight - document.documentElement.clientHeight;
     const tabbarHeight = 50; // 假设 tabbar 高度为 50px
     document.body.style.paddingBottom = `${tabbarHeight + safeAreaBottom}px`;
   }