IphoneX底部適配

1.判斷是不是IPhoneX手機

let isIphone = /iphone/gi.test(window.navigator.userAgent)
  let windowW = window.screen.width
  let windowH = window.screen.height
  let pixelRatio = window.devicePixelRatio

  let isIPhoneX = isIphone && pixelRatio && pixelRatio === 3 && windowW === 375 && windowH === 812
  let isIPhoneXSMax = isIphone && pixelRatio && pixelRatio === 3 && windowW === 414 && windowH === 896
  let isIPhoneXR = isIphone && pixelRatio && pixelRatio === 2 && windowW === 414 && windowH === 896

  if (isIPhoneX || isIPhoneXSMax || isIPhoneXR) {
    // 底部增長fix-iphonex-bottm 樣式
    $(".contact-box").addClass('fix-iphonex-bottom')
    // 底部增長iphone-footer-bg樣式 初始none,條件知足block
    $(".iphone-footer-bg").addClass('iphonexshow')
  }

2.增長fix-iphonex-bottom樣式

.fix-iphonex-bottom {
  bottom: 34px !important;
}

若是想更改IPhoneX底部34像素的背景顏色怎麼辦呢？

3.增長iphone-footer-bg樣式

.iphone-footer-bg {
  height: 34px;
  background: #6D6D6D;
  width: 100%;
  position: absolute;
  bottom: -33px;
  display: none;
}
.iphonexshow {
  display: block !important;
}