IphoneX底部兼容的完成

2021-03-17 10:51 jianzhan

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: ⑶3px;
  display: none;
}
.iphonexshow {
  display: block !important;
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。