热搜：编程 Python Microsoft 编程语言 C++

IphoneX底部适配的如何实现

发布时间：2023-05-30 05:30:43 来源：网络

.

天气晴朗，天空万里无云，温暖的阳光洒在人的身上，就像是一位母亲轻轻地抚摸着我们，微风徐徐，波光粼粼，站在美丽的湖边尽情享受大自然的无穷魅力。

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

到此这篇关于IphoneX底部适配的如何实现就介绍到这了。点燃了的火炬不是为了火炬本身，就像我们的美德应该超过自己照亮别人。更多相关IphoneX底部适配的如何实现内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:

标签： IphoneX