微信小程序適配 iPhone X 總結(jié)

方法一 js直接調(diào)用wx.getSystemInfoSync

底部
<view class='btn' style="padding-bottom:{{isIPhoneX ? 68 : 0}}rpx;" >底部</view>
1
判斷是否是iPhoneX

const app = getApp()
 
Page({
  data: {
    isIPhoneX:false,
  },
  onLoad: function () {
    this.setData({
      "isIphoneX": this.isIphoneX()
    })
  },
  isIphoneX() {
   let res = wx.getSystemInfoSync();
   if (res.screenHeight == 812 || res.screenHeight == 896) {
      return true;
    } else {
      return false;
    }
  }
})

方法二 app.js 調(diào)用wx.getSystemInfoSync，設(shè)置全局變量, onLaunch 調(diào)用checkIsIPhoneX

  isIPhoneX: false, // 當(dāng)前設(shè)備是否為 iPhone X

  // 判斷設(shè)備是否為 iPhone X
  checkIsIPhoneX: function () {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        var safeBottom = res.screenHeight - res.safeArea.bottom
        that.kBottomSafeHeight = safeBottom
        //根據(jù)安全高度判斷
        if (safeBottom === 34) {
          that.globalData.isIPhoneX = true
          that.isIPhoneX = true
        }
        // // 根據(jù) model 進(jìn)行判斷
        // if (res.model.search('iPhone X') != -1) {
        //   that.globalData.isIPhoneX = true
        //   that.isIPhoneX = true
        // }
        // // 或者根據(jù) screenHeight 進(jìn)行判斷
        // if (res.screenHeight == 812 || res.screenHeight == 896) {
        //   that.isIPhoneX = true
        // }
      }
    })
  },

js

var app = getApp();

  data: {
    isIPhoneX: app.isIPhoneX,
   }

wxml

<view class='{{isIPhoneX ? "footer-bg-IPhoneX ":"footer-bg"}}'>
</view>

wxss

.footer-bg {
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
}

.footer-bg-IPhoneX {
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  /* iPhone X 內(nèi)容往上偏移 34px */
  padding-bottom: 68rpx;
}