移動端H5-iPhone安全距離適配

發表於2021-12-27

安全區域?

安全區域指的是一個可視視窗範圍,處於安全區域的內容不受圓角(corners)、齊劉海(sensor housing)、小黑條(Home Indicator)影響,如下圖藍色區域:

也就是說,我們要做好適配,必須保證頁面可視、可操作區域是在安全區域內。
更詳細說明,參考文件:Human Interface Guidelines - iPhoneX

viewport-fit

iOS11 新增特性,蘋果公司為了適配 iPhoneX 對現有 viewport meta 標籤的一個擴充套件,用於設定網頁在可視視窗的佈局方式,可設定三個值:

  • contain: 可視視窗完全包含網頁內容(左圖)
  • cover:網頁內容完全覆蓋可視視窗(右圖)
  • auto:預設值,跟 contain 表現一致

注意:網頁預設不新增擴充套件的表現是 viewport-fit=contain,需要適配 iPhoneX 必須設定 viewport-fit=cover,這是適配的關鍵步驟。

更詳細說明,參考文件:viewport-fit-descriptor

env() 和 constant()

iOS11 新增特性,Webkit 的一個 CSS 函式,用於設定安全區域與邊界的距離,有四個預定義的變數:

  • safe-area-inset-left:安全區域距離左邊邊界距離
  • safe-area-inset-right:安全區域距離右邊邊界距離
  • safe-area-inset-top:安全區域距離頂部邊界距離
  • safe-area-inset-bottom:安全區域距離底部邊界距離
    這裡我們只需要關注 safe-area-inset-bottom 這個變數,因為它對應的就是小黑條的高度(橫豎屏時值不一樣)。

注意:當 viewport-fit=contain 時 env() 是不起作用的,必須要配合 viewport-fit=cover 使用。對於不支援env() 的瀏覽器,瀏覽器將會忽略它。
需要做向後相容,像這樣:

padding-bottom: constant( safe-area-inset-bottom); /* 相容 iOS < 11.2 */
padding-bottom: env( safe-area-inset-bottom); /* 相容 iOS >= 11.2 */

注意:env() 跟 constant() 需要同時存在,而且順序不能換。
更詳細說明,參考文件:Designing Websites for iPhone X

如何適配

瞭解了以上所說的幾個知識點,接下來我們適配的思路就很清晰了。

第一步:設定網頁在可視視窗的佈局方式

新增 viweport-fit 屬性,使得頁面內容完全覆蓋整個視窗:

<meta name="viewport" content="width=device-width, viewport-fit=cover">

前面也有提到過,只有設定了 viewport-fit=cover,才能使用 env()。

第二步:頁面主體內容限定在安全區域內

這一步根據實際頁面場景選擇,如果不設定這個值,可能存在小黑條遮擋頁面最底部內容的情況。

body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

第三步:fixed 元素的適配

型別一:fixed 完全吸底元素(bottom = 0),比如下圖這兩種情況:
可以通過加內邊距 padding 擴充套件高度:

{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

或者通過計算函式 calc 覆蓋原來高度:

{
height: calc(60px(假設值) + constant(safe-area-inset-bottom));
height: calc(60px(假設值) + env(safe-area-inset-bottom));
}

注意,這個方案需要吸底條必須是有背景色的,因為擴充套件的部分背景是跟隨外容器的,否則出現鏤空情況。

else

型別一

還有一種方案就是,可以通過新增一個新的元素(空的顏色塊,主要用於小黑條高度的佔位),然後吸底元素可以不改變高度只需要調整位置,像這樣:

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

空的顏色塊:

{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #fff;
}
型別二

fixed 非完全吸底元素(bottom ≠ 0),比如 “返回頂部”、“側邊廣告” 等
像這種只是位置需要對應向上調整,可以僅通過外邊距 margin 來處理:

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

或者,你也可以通過計算函式 calc 覆蓋原來 bottom 值:

{
bottom: calc(50px(假設值) + constant(safe-area-inset-bottom));
bottom: calc(50px(假設值) + env(safe-area-inset-bottom));
}
@supports 隔離相容樣式

寫到這裡,我們常見的兩種型別的 fixed 元素適配方案已經瞭解了吧。如果我們只希望 iPhoneX 才需要新增適配樣式,我們可以配合 @supports 來隔離相容樣式,當然這個處理對頁面展示實際不會有任何影響:

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  div {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }
}

相關文章