對於
iPhone系列出的越來越多，如果只是使用@media來做適配的話，老代碼想要適配新機型還是有一定侷限性的。
今天去搜了搜相關的解決方法，那麼就來總結一下。
安全區
早期蘋果對於 iPhone X 的設計佈局意見如下：
核心內容應該處於 Safe area 確保不會被設備圓角(corners)，傳感器外殼(sensor housing，齊劉海) 以及底部的 Home Indicator 遮擋。也就是說 我們設計顯示的內容應該儘可能的在安全區域內。
區域劃分
下面兩張圖簡單的描述了安全區域的劃分細節：
適配方案
通過在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">
viewport-fit 取值：
| 值 | 描述 |
|---|---|
viewport-fit=auto |
默認值，頁面內容顯示在safe area內 |
viewport-fit=cover |
頁面內容充滿屏幕 |
CSS constant()函數與env()函數
在iOS 11中的webkit包含了一個新的CSS函數constant()，以及一組四個預定義的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。當合並一起使用時，允許樣式引用每個方面的安全區域的大小。
只有當我們設置 viewport-fit=cover的時候上述的常量才能生效。
寫法如下：
/* 兼容 iOS < 11.2 */
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
}
/* 兼容 iOS >= 11.2 */
body {
padding-top: env(safe-area-inset-top); //爲導航欄+狀態欄的高度 88px
padding-left: env(safe-area-inset-left); //如果未豎屏時爲0
padding-right: env(safe-area-inset-right); //如果未豎屏時爲0
padding-bottom: env(safe-area-inset-bottom);//爲底下圓弧的高度 34px
}
因此在我們做iPhone適配的時候，最好是constant和env一起使用。