前言
iPhone X和IOS 11的發布，不僅在許多技術方面造成了一定的沖擊，前端也不可以避免地也受到影響，因為iPhone X劉海的影響，在編寫前端頁面的時候要做一些處理，下面先提出一些新的概念。
iphone介紹
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 遮擋。也就是說 我們設計顯示的內容應該盡可能的在安全區域內；
iPhoneX的適配------適配方案viewport-fit
一、CSS3新特性viewport-fit
PhoneX的適配，在iOS 11中采用了viewport-fit的meta標簽作為適配方案
在w3c.org官方給出的關於圓形展示(Round display)的標准中， 提到了viewport-fit這一屬性，這個屬性表明了對於某些屏幕並不是矩形形狀的設備的時候瀏覽器該如果進行顯示。傳送門:viewport-fit官方參考文檔
viewport-fit取值如下：
| auto | 默認 |
| contain | 頁面內容顯示在safe area內同auto |
| cover | 頁面內容充滿屏幕 |
eg：<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">
二、CSS3新特性env()、constant()以及預定義變量safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom
在定義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 { padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px
}
三、開始動手
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 { position: fixed; top: 0; left: 0; width: 100%; display: block; box-sizing: border-box; /* 因為header導航欄是基於屏幕進行定位，所以要做單獨的padding擠壓處理 */ padding-right: constant(safe-area-inset-right); padding-left: constant(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); overflow: scroll; background-color:#2889e8; } /* body 在橫屏底下和豎屏底下一定要做好定位，不然*/
/* 豎屏底下的查詢 */ @media screen and (orientation: portrait) { body { /* 防止頁面被劉海遮住 */ padding-top: constant(safe-area-inset-top); } } /* 橫屏底下的查詢 */ @media screen and (orientation: landscape) { body { /* IOS 11支持*/ padding-right: constant(safe-area-inset-right); padding-left: constant(safe-area-inset-left); /*IOS 11.2版本版本支持*/ padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); } }
iPhoneX的適配------高度統計
iPhoneX的適配------媒體查詢
注意這里采用的是690px(safe area高度)，不是812px;
@media only screen and (width: 375px) and (height: 690px){
body {
background: blue;
}
}
iphoneX viewport-fit問題總結
一、iphoneX 頁面使用漸變色
設置viewport-fit:cover，如果設置單色會填充整個屏幕，如果設置漸變色那么只會使用子元素的高度去渲染；而且頁面的高度只有690px高度，上面使用了padding-top:88px;
代碼
<body>
<div class="content">this is subElement</div>
</body>
// 單色時
* { padding: 0; margin: 0; } body { background:green; padding-top: constant(safe-area-inset-top); //88px
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/ } // 漸變色
* { padding: 0; margin: 0; } body { background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f),to(#ffaa22)); padding-top: constant(safe-area-inset-top); //88px
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/ }
解決使用漸變色沒有填充整個屏幕
代碼
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, viewport-fit=cover">
<title>Designing Websites for iPhone X: Respecting the safe areas</title>
<style> * { padding: 0; margin: 0; } html, body { height: 100%; } body { padding-top: constant(safe-area-inset-top); padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); } .content { background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22)); width: 100%; height: 724px; }
</style>
</head>
<body>
<div class="content">this is subElement</div>
</body>
</html>
二、iphoneX頁面使用固定定位 {position:fixed;}
這里可能有人會有疑問，為什么非通欄下的頁面內容是通到底部的，而按鈕卻是在安全區域上方呢？
這個問題涉及到安全區域，iOS11 和先前版本的不同之處在於，webview 比較重視安全區域了。這意味着，如果給頁面元素設置 top: 0, 它會渲染在屏幕頂部的44px之下，也就是狀態欄下面。如果給頁面元素設置 bottom: 0, 它會渲染在屏幕底部的34px之上，也就是底部安全區域上面。
情況一：設置viewport-fit:contain/auto時，子元素固定在頁面底部，可以看到bottom:0時只會顯示在安全區域內；
代碼
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<!--<meta name="viewport" content="initial-scale=1, viewport-fit=cover">-->
<title>Designing Websites for iPhone X: Respecting the safe areas</title>
<style>
* { padding: 0; margin: 0; } /*html,body {*/
/*height: 100%;*/
/*}*/ body { background: grey; /*padding-top: constant(safe-area-inset-top);*/
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/ } .top { width: 100%; height: 44px; background: purple; } .bottom { position: fixed; bottom: 0; left: 0; right: 0; height: 44px; color: black; background: green; } </style>
</head>
<body>
<div class="top">this is top</div>
<div class="bottom">this is bottom</div>
</body>
</html>
參考資料
iPhone X的Web設計（重點）
剖析 iOS 11 網頁適配問題（重點）
iPhone X 適配手Q H5 頁面通用解決方案 （重點）