在线观看视频日本一区二区,国产中文在线精品亚洲二区

騰訊設計師教你如何極速適配 iPhone X

時間：2018-01-25來源：5wd995.cn點擊量：次作者：fubowen

時間：2018-01-25點擊量：次作者：fubowen

有什么方法可以極速適配iPhone X ？今天這篇好文騰訊設計師以QQ空間H5的項目為例，給大家分享最快的適配方法！

一. iPhone X適配方案

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

1. 客戶端適配

解決方案

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

利弊分析

優(yōu)點：H5前端開發(fā)沒有任何適配工作量。
缺點：頁面會限制在客戶端限制的webview區(qū)域內(nèi)，沒有滿屏效果。

2. 使用media query

解決方案

針對iPhoneX機型在html結(jié)構(gòu)的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; }
}

適配效果

利弊分析

優(yōu)點：對于iPhone X適配，最簡單直接有效的方法，不會影響到其他iOS機型。
缺點：對于全屏／透頂標題欄／橫屏情況都要用不同的css代碼進行適配，不夠靈活。另外，如果蘋果下一年又發(fā)布了類似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）都相關(guān)的，故以iOS版本為區(qū)別具體分析一下全屏下的H5頁面：

（1）針對iOS11.0以下系統(tǒng)：

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

（2）針對于iOS11.0-iOS11.1的系統(tǒng)：

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

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

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

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

（3）針對iOS11.2及iOS11.2以上的系統(tǒng)：

constant() function改成了env()，其他與iOS11.2以下表現(xiàn)一樣（詳見第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)的較大值。

總結(jié)如下圖：

在了解了以上情況后，大致可以知道如果要適配一個普通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的值是基于「如果布局接觸了非安全區(qū)域才會賦值」。所以在不同情況下會有不同表現(xiàn)。如下表所示：

適配結(jié)果

這里展示了iPhone8 / iPhone X （iOS11.2）透頂狀態(tài)欄／透頂標題欄／普通標題欄下打開適配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>

利弊分析

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

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

二. iPhone X模擬器 H5調(diào)試

介紹

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

運行模擬器

系統(tǒng)要求：

Mac OS 10.12.6以上
Xcode9.0以上

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

安裝應用

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

H5 調(diào)試

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