关于H5和小程序在适配苹果X以上下面横线的遮挡

H5开发
第一步：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,viewport-fit=cover" name="viewport" />

第二步：

{

    padding-bottom: env(safe-area-inset-bottom);

}

或者

{

height: calc(60px(假设值) + env(safe-area-inset-bottom));

margin-bottom: env(safe-area-inset-bottom);

}

小程序开发

const _this = this;

    wx.getSystemInfo({

      success: function(res) {

        //查询是否是iponex

        const model = res.model

        if (model.search('iPhone X') != -1) {

          _this.globalData.isIpx = true;

        } else {

          _this.globalData.isIpx = false;

        }

        if (res.brand.search('HONOR')!=-1) {

          console.log('HUAWEI')

          _this.globalData.isHuaWei = true;

        }

        //导航高度

        let totalTopHeight = 68 //默认安卓

        let isAndro = true //默认安卓

        if (res.model.indexOf('iPhone X') !== -1) {

          totalTopHeight = 88

          isAndro = false

        } else if (res.model.indexOf('iPhone') !== -1) {

          totalTopHeight = 64

          isAndro = false

        }

        _this.globalData.navHeight = totalTopHeight

        _this.globalData.isAndro = isAndro

        _this.globalData.windowHeight = res.windowHeight

      },

      fail(err) {

        console.log(err)

      }

    });

步骤二： 在需要引用的页面js文件中onload方法里获取全局变量

let isIphoneX = app.globalData.isIphoneX;

this.setData({

isIphoneX: isIphoneX

})

步骤三：在 wxml文件中 进行css的逻辑判断

<view class="{{isIphoneX?'isIPX':''}}"> </wiew>

步骤四：在 wxss文件中 进行css，修改自己需要的css样式即可

.isIPX {

      padding-bottom: 30rpx !important;

}