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;}