iPhonex系列手机底部适配

iPhoneX、iPhone11、iphoneXR 等全屏手机，由于下方有一个小长条，到底吸底按钮等元素被下方小长条遮住，需向上移动一点，将小长条留出距离，

适配方法如下：

js:

  let deviceHeight = window.screen.height
    let deviceWidth = window.screen.width
    let DPR = window.devicePixelRatio
    let condition1 = (deviceWidth === 375) && (deviceHeight === 812) && (DPR === 3)
    let condition2 = (deviceWidth === 414) && (deviceHeight === 896) && (DPR === 2)
    let condition3 = (deviceWidth === 414) && (deviceHeight === 896) && (DPR === 3)
    if (condition1 || condition2 || condition3) {
      this.isIphoneX = true
    }

css:

@media only 
screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) , 
screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2), 
screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3){
  /*增加底部适配层*/
  .fit-iphonex {
    box-sizing: content-box;
    padding-bottom: 34px;
    &:after {
      content: '';
      z-index: 9998;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 34px;
      background: #F9F9F9;
    }
  }
}