IphoneX底部适配

Alliot 发布于2019-08-30 11:15 / 2160人阅读

摘要：判断是否是手机底部增加样式底部增加样式初始条件满足增加样式如果想更改底部像素的背景颜色怎么办呢增加样式

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

GPU云服务器云服务器 iphonex iphonex怎么念如何设置iphonex 屏幕底部

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114869.html

iphoneX适配-客户端H5页面

摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏之前的客户...

GitChat 2019-08-02 15:59 评论0 收藏0
iphoneX适配-客户端H5页面

摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏之前的客户...

wuaiqiu 2019-08-29 13:58 评论0 收藏0
iphoneX适配-客户端H5页面

摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏之前的客户...

fou7 2019-08-21 17:56 评论0 收藏0