目前项目要兼容到15年安卓手机。其中有些手机不支持安全区。

什么是安全区

即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。说白: 就是底部与tabBar重叠，底部需要加上安全区的高度。

正常的解决方案是:

// tabBar样式加上安全区
height: calc(0.96rem + env(safe-area-inset-bottom));

如果手机不支持安全区，如何解决

安装包用js来判断手机是否兼容底部安全区

npm install safe-area-insets --save
let safeAreaInsets = require('safe-area-insets')
onsole.log('safeAreaInsets.support', safeAreaInsets.support)

safeAreaInsets.support将会打印true或false

fixedScrollHeight(){
      const safeAreaInsets = require('safe-area-insets');
      onst tabBar = document.documentElement.getElementsByClassName('tabBarWrap');
        // safeAreaInsets报错的话
        try {
           // 判断手机是否支持安全区
          if(safeAreaInsets.support){
            this.pageUseHeightWithTab = window.pageProHeight - tabBar[0].offsetHeight ;
          }else {
            // 针对不支持
            this.pageUseHeightWithTab = window.innerHeight - tabBar[0].offsetHeight;
          }
        } catch (error) {
          this.pageUseHeightWithTab = window.pageProHeight - tabBar[0].offsetHeight ;
        }
}

Thanks for reading

若有错误，欢迎在评论区指正
更好解决方案，相当欢迎指导
帮到了您，点个赞再走吧~😊

<兼容>对不支持底部安全区手机的兼容方式

什么是安全区

如果手机不支持安全区，如何解决

Thanks for reading