小程序iPhonex适配

<!-- 小程序 在app 里面写 是否判断他是IPhone X-->
  wx.getSystemInfo({
      success: function(res) {
        if (res.model.indexOf('iPhone X') != -1) {
          that.globalData.isIphoneX = true //不等于-1 就是----
        }
      }
    })　

  globalData: {

   isIphoneX: false,

  }

//需要在页面他判断是否是Iphone X    如果在 index.js  里面写
const app =getApp()
  data:{
    isIphoneX:false,
   }

onload:function(options){
   const isIphone =app.globalData.isIphoneX;
   this.setData({
    
     isIphoneX:isIphoneX 
}

<!--给整个页面添加34px-->
  <view class="{{isIphoneX?'iPhoneX':''}}">
      <!-- 这里面是存放整个页面内容-->
     <!-- 如果底部有按钮这添加判断 增加34px-->
        <view class="bottom-btn{{isInphoneX?"btn-iPhone":" "}}">我是底部按钮</view>
   </view>

page{
  padding-bottom: 64px; //这里64px 是因为底部按钮40px + 加上需要适应的34px;

}
.iPhoneX{
   padding-bottom:34px; //若果是iphoneX 就离底部34px
    
  }
.bottom-btn{
    
  position: fixed;
  bottom: 10px; //底部距离相差10px
  left: 50%;
  width: 452rpx;
  margin-left: -226rpx;
  height: 40px; //底部按钮高40px
  background-color: #d62017;
  text-align: center;
  color: #fff;
  line-height: 40px;
  border-radius: 20px;
  font-size: 14px;
  }

//在三元里面判断 如果是iPhone 
.btn-iPhone{
 bottom:44px !important; //这里就需要加上它的底部距离10px
}