小程序的安全高度（针对一些特殊机型）

1、例如：iPhoneX的底部小黑条

 

 2、解决方案

（1）获取手机型号，单独处理样式（底部小黑条大约为68rpx） （2）实现铺满全屏效果 （3）具体代码

3、具体的实现方法

原生的放在app.js/uniapp放在app.vue

    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight ;
        // 获取视口高度
        let clientHeight = res.windowHeight;
        let clientWidth = res.windowWidth;
        let ratio = 750 / clientWidth;
        let height = clientHeight * ratio; 
        let modelmes = res.model;
        // 得到安全区域高度
        if (modelmes.search('iPhone X') != -1) //IPhoneX底部大约为68rpx
          this.globalData.screenHeight = (height+68) - (res.statusBarHeight * ratio) 
        }else{
          this.globalData.screenHeight = height - (res.statusBarHeight * ratio)
        }
      }, fail(err) {
        console.log(err);
      }
    })
  },

4、使用方法

<view class="container" style="{{'height:' + viewHeight + 'rpx'}}"></view>

data: {
    viewHeight: app.globalData.screenHeight,
}