適用於hips ui的iPhoneX及以上適配方案

版本信息: hips ui: 0.1.43

須知: 隨着hips ui的迭代，可能會解決適配問題，因此下面的方案是有時效性的。

若是你項目上很緊急，能夠直接看第三部分解決方案，複製粘貼代碼便可。

一. 無適配狀況

自從iPhone X出了劉海屏後，對於咱們前端是適配難度又更上一層樓。不知道你有沒有遇到過以下狀況

1.頭尾嵌入邊框

2.在適配了頭尾以後，scroll框子沒作適配，出現最後的內容別下方小黑條遮住的狀況

3.適配了iPhoneX，卻沒有適配iPhoneXs Max

若是，你遇到過以上幾種狀況，那麼就看過來，這篇文章就是爲了讓你解決諸如此類的問題而誕生的。 首先關於iPhoneX的適配問題，網上有不少文章，其中不乏優秀者，說的詳細透徹，這裏推薦幾篇 H5頁面如何適配iPhone X ？騰訊設計師給出了通用解決方案 https://www.jianshu.com/p/438c7c2e5664 他們都講述的很好，我就不多此一舉，再去copy一份了。咱們要說的是怎樣在hips ui的基礎上應用適配方案。

二. 適配問題

首先，拋出幾個可能會令你們困惑不解的幾個問題

1. 瀏覽器上無效

body {
    padding-top: constant(safe-area-inset-top);   //爲導航欄+狀態欄的高度 88px            
    padding-left: constant(safe-area-inset-left);   //若是未豎屏時爲0                
    padding-right: constant(safe-area-inset-right); //若是未豎屏時爲0                
    padding-bottom: constant(safe-area-inset-bottom);//爲底下圓弧的高度 34px       
}

有同窗會問，爲何我按照上面書寫，爲啥在瀏覽器上沒有效果。。。 這裏是由於這個屬性自己在瀏覽器上是看不出任何效果的，因此不須要疑惑，你只須要照作，而後去手機上看效果便可 2. 就算使用了上述代碼，個人頁頭仍然會處於最上方 這是由於你是在body中使用的，而hips ui的NavBar組件使用的是fixed佈局，top爲0，因此無論怎樣，它都會脫離文檔流，處於頁面的最上方

.hips-view__header--fixed {
    position: fixed;
    top: 0;
    left: 0;
}

1. popup如何適配
2. scroll組件的高度如何計算

三. 解決方案

好！瞭解了上述諸多問題後，咱們直接上代碼。

No.1 index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">

增長viewport=cover

No.2 _iosFit.styl

.hips-view {
  padding-top: constant(safe-area-inset-top) !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.hips-view__header--fixed {
  padding-top: constant(safe-area-inset-top) !important;
  padding-top: env(safe-area-inset-top) !important;
}

.hips-view__footer {
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

.hips-popup--bottom, .hips-overlay {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

既然在body中無效，那咱們就在hips ui的hips-view類中加上下間距，既然頁面頭是絕對定位，那咱們就在hips-view__header--fixed中加上下間距，這樣咱們就解決了適配問題中的兩個問題。 而後咱們還須要注意其餘的一些點，好比View組件的footer,popup組件，咱們都要加上響應代碼。 至此，咱們解決了適配問題的前三個

No.3 滾動條的高度

咱們知道在hips ui的scroll組件最外層，是須要加一個div，而後附上固定的height的,這個height固然也是須要考慮iphonex上的padding的，代碼以下

.scroll-box {
    height: calc(100vh - 13.333vw)
    height: calc(100vh - 13.333vw - constant(safe-area-inset-top) - constant(safe-area-inset-bottom))
    height: calc(100vh - 13.333vw - env(safe-area-inset-top) - env(safe-area-inset-bottom))
  }

上述代碼是針對頁面只有有一個頁頭的狀況，你們還需根據具體狀況減去相應的值

No.4 iPhoneXs Max的適配

由於css的constant函數和env函數在ios11以上已支持，因此咱們實際上不須要把代碼寫在媒體屬性裏，這樣的話，safe-area-inset-top只要這個值有效，那麼就會應用上，無效天然沒有效果。因此之後咱們就不須要專門爲iPhoneXs Max或新出的機型寫額外的適配代碼，一套代碼搞定所有。

ok，文章到此爲止，但願對你們有所幫助。不足指出，還請指出，相互交流會讓咱們的方案更加完善。

參考:

• iPhone X的缺口和CSS
• 前端 iPhoneX適配
• 關於H5頁面在iPhoneX適配
• H5頁面如何適配iPhone X ？騰訊設計師給出了通用解決方案！
• H5 IphoneX 適配簡述