IphoneX底部適配

Guakin_Huang 發布于2019-08-02 15:20 / 2343人閱讀

摘要：判斷是否是手機底部增加樣式底部增加樣式初始條件滿足增加樣式如果想更改底部像素的背景顏色怎么辦呢增加樣式

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 屏幕底部

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54066.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
IphoneX底部適配

摘要：判斷是否是手機底部增加樣式底部增加樣式初始條件滿足增加樣式如果想更改底部像素的背景顏色怎么辦呢增加樣式 1.判斷是否是IPhoneX手機 let isIphone = /iphone/gi.test(window.navigator.userAgent) let windowW = window.screen.width let windowH = window.screen....

Alliot 2019-08-30 11:15 評論0 收藏0