iPhone X適配 webpage
螢幕尺寸
iphoneX的適配——安全區域（safe area）
safe area確保不會被裝置圓角（corners），感測器外殼（sensor housing，齊劉海）以及底部的Home Indicator遮擋
一.頂部通欄
之前的版本採用狀態列20pc+導航欄44pt，iphone X做全面屏並多一塊小劉海，因此iphone單獨採用狀態列44pt+導航欄44pt，意味著內嵌的H5頁面整體下移34pt。
viewport-fit:cover+導航欄
二.底部操作欄
由於iphoneX是全面屏，頁面最底部會被彎曲的拐角截掉一部分，特別是有底部固定懸浮的tab條會嚴重受到影響。這個時候需要底部留出一塊空白安全區域，頁面內容最終的底線應在手機拐角處。該安全區域的高度為34pt。
（1）ios 11為了適配iphone X對現有的viewport meta標籤新增一個特性：viewport-fit。如果客戶端沒有做全屏適配，那麼頁面想要全屏覆蓋，則可使用該特性：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
ios 11中viewport-fit三個取值：
contain：視口完全包含網頁內容，頭部位置固定元素將被包含在ios11的安全區域內。設定safe-area-inset-left,safe-area-inset-rigth,safe-area-inset-top,safe-area-inset-bottom等引數不起作用。
cover：網頁內容完全覆蓋視口，頭部位置固定元素將被固定到視口，這和ios 10一致行為。頁面內容充滿螢幕。
auto：預設值，行為相同contain。頁面內容顯示在safe area；
（2）媒體查詢
1.利用constant函式
只設置viewport-fit=cover才能使用constant函式
CSS常量
constant(safe-area-inset-top):從視口頂部的安全預期插入量（以CSS畫素為單位）
constant(safe-area-inset-bottom):從視口底部的安全區域插入量（以CSS畫素為單位）
constant(safe-area-inset-left):從視口左側的安全區域插入量（以CSS畫素為單位）
constant(safe-area-inset-right):從視口右側的安全區域插入量（以CSS畫素為單位）
@supports(bottom:constant(safe-area-inset-bottom)) {
selector{
padding-bottom:constant(safe-area-inset-bottom); //底部圓弧的高度34px
padding-bottom:calc(30px(假設值) + constant(safe-area-inset-bottom)); //根據實際情況選擇適配方法
padding-top: constant(safe-area-inset-top); //導航欄和狀態列的高度88px；
padding-left: constant(safe-area-inset-left); //如果未豎屏時為0；
padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
}
}
2.利用iphoneX獨特的型號引數
/*
*針對viewport-fit:cover iphoneX的適配——媒體查詢
*方案一
*/
@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
.iphonex{padding-top: 44px; padding-bottom: 34px;}
.iphonex:before{content: ''; display: block; position: fixed; width: 100%; height: 44px;background-color: #000;top: 0; left: 0; z-index: 9999;}
.iphonex:after{content: '';display: block; position: fixed; width: 100%;height: 34px; bottom: 0; left: 0;z-index: 9999;}
}
/*
*針對viewport-fit:cover iphoneX的適配——媒體查詢
*方案二
*/
@media only screen and (width: 375px) and (height: 690px) {
body{
padding: 0;
margin: 0;
}
}3.js判斷
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
.iphonex{padding-top: 44px; padding-bottom: 34px;}
.iphonex:before{content: ''; display: block; position: fixed; width: 100%; height: 44px;background-color: #000;top: 0; left: 0; z-index: 9999;}
.iphonex:after{content: '';display: block; position: fixed; width: 100%;height: 34px; bottom: 0; left: 0;z-index: 9999;}
}4.固定底部和頂部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iphonex</title>
<meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport">
<style>
body{padding-top:44px;padding-bottom: 34px;}
.top{position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;}
.bottom{position: fixed;width:100%;height:34px;bottom:0;left: 0;}
</style>
</head>
<body>
<div class="top"></div>
<div class="content">sfsd</div>
<div class="bottom"></div>
</body>
</html>
5.客戶端協議
根據客戶端協議請求客戶端查詢是否是iphoneX，以此來保持和客戶端一致。
三.引數解釋以上程式碼中的引數解釋如下：
safe-area-inset-bottom — ios11新增特性，用於設定安全區域與邊界的距離 375 — iphoneX裝置的寬度 812 — iphoneX裝置的高度 3 — iphoneX裝置的解析度 724 — iphoneX裝置的高度(812) - 頂部通欄高度(88) 34 — 底部安全區域高度
44 — 頂部安全區域高度 以上引數均以標準的1pt=1px進行計算，如果H5頁面採用縮放的rem方式，那麼1pt = 1px * 3（iphoneX解析度）
參考資料：