H5頁面在iPhoneX劉海屏適配

iphone x和ios 11的發布，不僅在許多技術方面造成了一定的衝擊，前端也不可以避免地也受到影響，因為iphone x劉海的影響，在編寫前端頁面的時候要做一些處理，下面先提出一些新的概念。

iphone x 無論是在螢幕尺寸、解析度、甚至是形狀上都發生了較大的改變，下面以iphone 8作為參照物，看看到底iphone x的適配我們要怎麼考慮。

我們看看iphone x尺寸上的變化：

劉海屏也有其它叫法：凹凸屏、頭凹屏、覆蓋屏、挖孔屏等等，這裡統一按劉海屏命名，雖然都在吐槽iphonex的劉海屏，但是各大安卓廠商還是不停的爭相模仿，使用起來也是挺不方便的，顏值上公升，操作感下降，尤其是單手握住螢幕的邊緣時會有極大的不便。

蘋果ios的還好，但是安卓的廠商有小公尺、華為、oppo、vivo等都相應的出了自己的劉海屏，各大廠商也出了自己相容劉海屏的方案，我們在另外一篇文章中會提及到安卓全家桶——各大廠商的劉海屏解決方案。

因為劉海的關係，所有的展示都會放在乙個叫做safe-area的區域，如下圖，主要是為了防止顯示的內容被劉海感測器(house sensor)，圓角邊框(rounded corners)所遮擋，這樣對使用者來說是不友好的，但是如果全部內容被放置在預設的安全區域，顯示的內容就會被壓縮，這個時候需要做一些處理，既然頁面能夠正常顯示，又能夠不被安全區域遮擋。

核心內容應該處於 safe area 確保不會被裝置圓角(corners)，感測器外殼(sensor housing，齊劉海) 以及底部的 home indicator 遮擋。也就是說我們設計顯示的內容應該盡可能的在安全區域內；

phonex的適配，在ios 11中採用了viewport-fit的meta標籤作為適配方案

在w3c.org官方給出的關於圓形展示(round display)的標準中，提到了viewport-fit這一屬性，這個屬性表明了對於某些螢幕並不是矩形形狀的裝置的時候瀏覽器該如果進行顯示。傳送門:viewport-fit官方參考文件

viewport-fit取值如下：

auto

預設contain

頁面內容顯示在safe area內同auto

cover

頁面內容充滿螢幕

eg：在定義viewport-fix以後，瀏覽器會自動生成四個padding變數，即用來將頁面向內擠壓到可以正常顯示的位置。這個時候需要用到env或者constant來將變數轉換成css屬性值並且賦值給屬性。ps:env好像還在開發中，好像只支援ios 11.2及以上。目前比較穩妥的方法就是constant和env一起使用。傳送門:var預定義變數官方參考文件

1）當我們設定viewport-fit:contain,也就是預設的時候;設定safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等引數時不起作用的

2）當我們設定viewport-fit:cover時：設定如下

body

1、在meta中新增viewport-fit=cover(告訴瀏覽器要講整個頁面渲染到瀏覽器中，不管裝置是圓角與否，這個時候會造成頁面的元素被圓角遮擋)

2、為了處理這些顯示的問題，我們需要使用到env，constant還有預定義變數safe-area-inset-top,safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left。全部使用的這些方法或者變數都是在safari中全部定義好的，我們就正常使用就行。但是別忘記了還要做乙個向下相容。

導航欄因為是基於螢幕定位，所以padding要進行單獨的計算。env在ios 11.2中新增的，constant在ios 11.2 已經被廢棄，但是我們要做相容，所以都要用上。

*/header /*

body 在橫屏底下和豎屏底下一定要做好定位，不然

*//*

豎屏底下的查詢

*/@media screen and (orientation: portrait)

}/*橫屏底下的查詢

注意這裡採用的是690px(safe area高度)，不是812px;

@media only screen and (width: 375px) and (height: 690px)
}

設定viewport-fit:cover，如果設定單色會填充整個螢幕，如果設定漸變色那麼只會使用子元素的高度去渲染；而且頁面的高度只有690px高度，上面使用了padding-top:88px;

//單色時

body

//漸變色

這裡可能有人會有疑問，為什麼非通欄下的頁面內容是通到底部的，而按鈕卻是在安全區域上方呢？

這個問題涉及到安全區域，ios11 和先前版本的不同之處在於，webview 比較重視安全區域了。這意味著，如果給頁面元素設定 top: 0, 它會渲染在螢幕頂部的44px之下，也就是狀態列下面。如果給頁面元素設定 bottom: 0, 它會渲染在螢幕底部的34px之上，也就是底部安全區域上面。

情況一：設定viewport-fit:contain/auto時，子元素固定在頁面底部，可以看到bottom:0時只會顯示在安全區域內；

iphone x的web設計（重點）

iphone x適配沒那麼複雜，但也不是看上去這麼簡單

剖析 ios 11 網頁適配問題（重點）

iphone x(10)螢幕解析度與適配

iphone x 適配手q h5 頁面通用解決方案　（重點）

H5頁面在iPhoneX劉海屏適配

iphoneX適配客戶端H5頁面

h5頁面開發

H5及H5頁面是什麼意思？如何製作H5頁面？

H5頁面在iPhoneX劉海屏適配

iphoneX適配 客戶端H5頁面

h5頁面開發

H5及H5頁面是什麼意思？如何製作H5頁面？

相關推薦

iphoneX適配客戶端H5頁面