iPhone X適配方案及 H5調試技巧

搜索

APP

起點課堂會員權益

職業體系課特權

線下行業大會特權

個人IP打造特權

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業技能直播

會員專屬社群

榮耀標識

發布

注冊 | 登錄

騰訊ISUX

2018-01-11

1 評論 12762 瀏覽 47 收藏

10 分鐘

這是一份有關極速適配 iPhone X 秘笈，enjoy~

iPhone X適配方案

2017年9月蘋果發布了iPhone X機型，對于它的“劉海兒”和底部Home Indicator，QQ空間H5也在第一時間做了兼容適配。在適配過程中，我們也嘗試了這三種方案，如下：

解決方案1：客戶端適配

客戶端直接將webview的安全區域限制在除去安全區域的區域內。頁面將展示在下圖灰色webview內：

利弊分析

優點：H5前端開發沒有任何適配工作量。
缺點：頁面會限制在客戶端限制的webview區域內，沒有滿屏效果。

解決方案2：使用media query

針對iPhoneX機型在html結構的meta標簽加入

<meta name=”viewport”

content=”…,viewport-fit=cover” />

在 css 中加入

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

…{ padding-top: 44px; }

…{ padding-bottom: 34px; }

}

適配效果：

利弊分析

優點：對于iPhone X適配，最簡單直接有效的方法，不會影響到其他iOS機型。
缺點：對于全屏／透頂標題欄／橫屏情況都要用不同的css代碼進行適配，不夠靈活。另外，如果蘋果下一年又發布了類似iPhone X plus這樣的機型，適配工作就要重新來過。

解決方案3：使用蘋果提供的新屬性

蘋果對于iPhone X上H5頁面的適配，提供了特殊屬性支持，包括meta標簽的viewport屬性值中加入viewport-fit和加入constant(safe-area-inset-X)和env(safe-area-inset-X) ，這些屬性是與iOS11以上的所有iPhone機型（不僅僅包括iPhone X）都相關的，故以iOS版本為區別具體分析一下全屏下的H5頁面：

（1）針對iOS11.0以下系統

將不識別H5頁面meta標簽下的viewport-fit及constant(safe-area-inset-X)／env(safe-area-inset-X)屬性。

（2）針對于iOS11.0-iOS11.1的系統

當設置了viewport-fit=cover，H5頁面會覆蓋頁面安全區域全屏展示，但是這樣會帶來頁面元素會被“劉海兒”和底部Home Indicator遮擋問題，所以蘋果提供在css中設置constant(safe-area-inset-X)距離來規避遮擋問題。

這些在不同webview下會表現不同的值，我們留到后面分析。

另外，頁面不加viewport-fit=cover默認viewport-fit=contain/auto，也就是我們看到的頁面不能覆蓋安全區域的情況，此時constant(safe-area-inset-X)的值都為0。

所以在meta標簽的viewpoint中加viewport-fit=cover時iOS10和iOS11下constant(safe-area-inset-X)值的表現是不一樣的。

（3）針對iOS11.2及iOS11.2以上的系統

constant() function改成了env()，其他與iOS11.2以下表現一樣（詳見第2點）。另外，iOS11.2新增了CSS function: min()和max()。例如：

padding-left: max(12px, env(safe-area-inset-left));

在env(safe-area-inset-left)值因為webview變化時值也可以做出相應變化，取12px和env(safe-area-inset-left)的較大值。

總結如下圖：

在了解了以上情況后，大致可以知道如果要適配一個普通H5頁面的頂部時，可以在meta標簽的viewport屬性中加入：

<meta name=”viewport” content=”…,viewport-fit=cover” />

然后在需要的class里面加入：

…{

padding-top: 20px; /* iOS 10 */

padding-top: constant(safe-area-inset-top); /* iOS 11.0-iOS 11.1 */

padding-top: env(safe-area-inset-top); /*iOS 11.2 */

}

在iOS11機型上，H5加入viewport-fit=cover后，safeArea的值是基于“如果布局接觸了非安全區域才會賦值”。所以在不同情況下會有不同表現。如下表所示：

適配結果：

這里展示了iPhone8 / iPhone X （iOS11.2）透頂狀態欄／透頂標題欄／普通標題欄下打開適配H5的效果圖。

對應代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>test</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover” />

<style type=”text/css”>

html {

background-color: #FFCD00;

}

html,body{

width: 100%;

height: 100%;

}

body, div{

margin: 0;

padding: 0;

}

.main{

font-size: 24px;

text-align: center;

width: 100%;

height: 100%;

padding-top: constant(safe-area-inset-top);

padding-top: env(safe-area-inset-top);

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

padding-bottom: env(safe-area-inset-bottom);

box-sizing: border-box;

display: flex;

flex-direction: column;

justify-content: space-between;

}

</style>

</head>

<body>

<div class=”main”>

<div class=”top”>————頂部————</div>

<div class=”bottom”>————底部————</div>

</div>

</body>

</html>

利弊分析

優點：符合標準的適配，靈活運用的話，H5在不同webview下打開都可以有完美的展現。且考慮了未來機型的適配。
缺點：適配iPhone X時需要同時考慮其他iOS11機型下會不會受到影響。

以上只分析豎屏webview下的情況，橫屏webview可以自行通過模擬器進行研究。接下來介紹一下模擬器的使用。

iPhone X模擬器 H5調試

介紹

加入適配代碼后，在沒iPhone X的情況下，可以通過iPhone X模擬器調試，像手機QQ／手機空間里的H5頁面，可以通過在模擬器上安裝手機QQ／手機空間app，然后調用Safari調試。

運行模擬器

系統要求：

Mac OS 10.12.6以上
Xcode9.0以上

步驟：在Xcode打開一個空白項目，選擇iPhoneX模擬器，并點擊運行按鈕即可。

安裝應用

在Xcode上直接編譯客戶端代碼?；蛘咦尶蛻舳碎_發編譯一份模擬器版本的.app文件，將其拖進運行的模擬器屏幕，應用就成功安裝了。

H5 調試

安裝應用后，在應用里訪問H5頁面，然后打開Safari（需要開啟Safari的開發工具），在菜單中選擇開發-Simulator-頁面地址，就可以用Safari的檢查器對其作調試了。（當有多個頁面地址，將鼠標移至二級菜單的某一個頁面地址時，模擬器頁面屏幕會有藍色遮罩出現時則是選中了本頁面地址），有些時候Safari識別不到模擬器，只需退出Safari，點一下模擬器屏幕，再重新打開Safari一般就會出來了。