網頁適配iPhoneX【轉】

以下是處理前后效果圖:

適配之前需要了解的幾個新知識

安全區域

安全區域指的是一個可視窗口范圍,處于安全區域的內容不受圓角(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

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 時 constant 函數是不起作用的,必須要配合 viewport-fit=cover 使用。對于不支持 constant 的瀏覽器,瀏覽器將會忽略它。

官方文檔中提到 env 函數即將要替換 constant 函數,筆者測試過暫時還不可用。

更詳細說明,參考文檔:?Designing Websites for iPhone X

如何適配

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

第一步:設置網頁在可視窗口的布局方式

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

前面也有提到過,只有設置了 viewport-fit=cover,才能使用 constant 函數。

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

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


第三步:fixed 元素的適配

類型一:fixed 完全吸底元素(bottom = 0),比如下圖這兩種情況:

可以通過加內邊距 padding 擴展高度:

{??

padding-bottom:?constant(safe-area-inset-bottom);??

}?

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

{?

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

}?

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

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

{?

??margin-bottom:?constant(safe-area-inset-bottom);?

}?

空的顏色塊:

{?

??position:?fixed;?

??bottom:?0;?

??width:?100%;?

??height:?constant(safe-area-inset-bottom);?

??background-color:?#fff;?

}?

類型二:fixed 非完全吸底元素(bottom ≠ 0),比如 “返回頂部”、“側邊廣告” 等

像這種只是位置需要對應向上調整,可以僅通過外邊距 margin 來處理:

{?

??margin-bottom:?constant(safe-area-inset-bottom);?

}?

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

{?

??bottom:?calc(50px(假設值)?+?constant(safe-area-inset-bottom));?

}?

別忘了使用 @supports

寫到這里,我們常見的兩種類型的 fixed 元素適配方案已經了解了吧,但別忘了,一般我們只希望 iPhoneX 才需要新增適配樣式,我們可以配合 @supports 這樣編寫樣式:

@supports?(bottom:?constant(safe-area-inset-bottom))?{?

??div?{?

????margin-bottom:?constant(safe-area-inset-bottom);?

??}?

}?

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容