1. iPhoneX的介紹
螢幕尺寸
我們熟知的iPhone系列開發尺寸概要如下：
△ iPhone各機型的開發尺寸
轉化成我們熟知的像素尺寸：
△ 每個機型的多元度尺寸
倍圖其實就是像素尺寸和開發尺寸的倍率關系，但這隻是外在的表現。倍圖核心的影響因素在于PPI(DPI)，了解螢幕密度與各尺寸的關系有助于我們深度了解倍率的概念：《基礎知識學起來！為設計師量身打造的DPI指南》
iPhone8在本次更新中，螢幕尺寸和分辨率都遺傳了iPhone6以後的優良傳統；
然而iPhone X 無論是在螢幕尺寸、分辨率、甚至是形狀上都發生了較大的改變，下面以iPhone 8作為參照物，看看到底iPhone X的适配我們要怎麼考慮。
我們看看iPhone X尺寸上的變化：
2. iPhoneX的适配---安全區域(safe area)
蘋果對于 iPhone X 的設計布局意見如下：
核心内容應該處于 Safe area 確定不會被裝置圓角(corners)，傳感器外殼(sensor housing，齊劉海) 以及底部的 Home Indicator 遮擋。也就是說 我們設計顯示的内容應該盡可能的在安全區域内；
3. iPhoneX的适配---适配方案viewport-fit
3.1 PhoneX的适配，在iOS 11中采用了viewport-fit的meta标簽作為适配方案；viewport-fit的預設值是auto。
viewport-fit取值如下：
auto： 預設：viewprot-fit:contain;頁面内容顯示在safe area内
cover： viewport-fit:cover,頁面内容充滿螢幕
viewport-fit meta标簽設定(cover時)
3.2 css constant()函數 與safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介紹
如上圖所示 在iOS 11中的WebKit包含了一個新的CSS函數constant()，以及一組四個預定義的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。當合并一起使用時，允許樣式引用每個方面的安全區域的大小。
3.1當我們設定viewport-fit:contain,也就是預設的時候時;設定safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等參數時不起作用的。
3.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}
4. iPhoneX的适配---高度統計
viewport-fit:cover + 導航欄
5.iPhoneX的适配---媒體查詢
注意這裡采用的是690px(safe area高度)，不是812px;
@media only screen and ( 375px) and (height: 690px){body {
background:blue;
}}
6.iphoneX viewport-fit 問題總結
1.關于iphoneX 頁面使用了漸變色時；如果viewport-fit:cover;
1.1在設定了背景色單色和漸變色的差別，如果是單色時會填充整個螢幕，如果設定了漸變色 那麼隻會更加子元素的高度去渲染；而且頁面的高度隻有690px高度，上面使用了padding-top:88px;
body固定為：
this is subElement
1.單色時：
*{padding:0;margin:0;
}body{background:green;padding-top:constant(safe-area-inset-top);//88px
}
2.漸變色
*{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
}
解決使用漸變色 仍舊填充整個螢幕的方法；CSS設定如下
Designing Websites for iPhone X: Respecting the safe areas
}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;
}
this is subElement