小さなプログラムのインタフェースの部分の空白はiPhone Xに適しています

時々私たちのページがiPhone Xで動作していることに気づいたとき、下の部分が空白だったので、私たちは
どうやってこの問題を解決するのか、まずプログラムを開くときに携帯電話の機種を取得し、グローバル変数を使って、今回使った携帯電話がiPhoneXかどうかをインタフェースに伝えるべきだ.

const api = require('./utils/api')
//app.js
App({
  onLaunch: function (ops) {

    //         

    if (ops.scene == 1044) {
      console.log(ops.shareTicket)
    }

    var _this = this
    wx.getSystemInfo({
      success: function (res) {
        // console.log(res.model)
        // console.log(res.pixelRatio)
        // console.log(res.windowWidth)
        // console.log(res.windowHeight)
        // console.log(res.language)
        // console.log(res.version)
        // console.log(res.platform)
        if (res.model == 'iPhone X') {
          _this.globalData.isIpx= true;
          // console.log(_this.globalData.isIpx)
        }
      }
    })
  },
  globalData: {
    isIpx: false
  }

})

iPhone Xと通常の携帯電話にcssスタイルを1セットずつ与える必要があります

/* app.wxss */

.fix-iphonex-button {
  background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1));
  height: 1448rpx;
  width: 100%;
}

.fix-iphonex-button::after {
  background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1));
  height: 1206rpx;
  width: 100%;
}

インタフェースViewはclassを与えるときisIpxによってどのスタイルを与えるかを判断する

  
  .....