小程序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
}