本文主要講解： 原生的iOS項(xiàng)目iPhone X適配很簡(jiǎn)單矿卑，今天我主要講解一下web APP 應(yīng)用的適配
1酪刀、熟悉iPhone X的屏幕：
2刮萌、適配思路：
?2.1? 適配啟動(dòng)圖? （iPhone X需要一張1125 * 2436）一張即可實(shí)現(xiàn)cover 全屏覆蓋效果傻粘，但是出現(xiàn)top克饶、bottom不和諧的情況，這是iPhone X的頂部劉海20px和底部home感應(yīng)區(qū)導(dǎo)致卦停，我們需要看? 2.2的解決方案??
?2.2??將項(xiàng)目加入到safe area (安全區(qū))
蘋果提供函數(shù)：
constant(safe-area-inset-top)!important;
env(safe-area-inset-top)!important;
關(guān)于這兩個(gè)函數(shù)的講解向胡，請(qǐng)參考：
如上圖恼蓬，本人理解 這兩個(gè)函數(shù)功能一致，env() 兼容? iOS11.2 以上版本
官方解釋： https://webkit.org/blog/7929/designing-websites-for-iphone-x/?hmsr=funteas.com&utm_medium=funteas.com&utm_source=funteas.com
以上是iPhone X 的設(shè)計(jì)原理和我們參照h5界面的適配的解決方案僵芹，接下來我用自己ionic項(xiàng)目給大家講解一下：
1处硬、適配頂部劉海：在工程的主題文件里加入以下代碼：
ion-header{
ion-navbar:nth-child(1){
padding-top:constant(safe-area-inset-top)!important;
padding-top:env(safe-area-inset-top)!important;
}
}
?解釋：
pading-top:constant(safe-area-inset-top)!important;? ?：? 頂部切20px ===?safe-area-inset-top
padding-top:env(safe-area-inset-top)!important;? ? ? ? :? ?頂部切20px ===?safe-area-inset-top
!important 自己百度
2、適配底部home感應(yīng)區(qū)：怎么說呢拇派，對(duì)于不同的工程比較復(fù)雜：
因?yàn)槲覀儗㈨敳肯乱?0px,底部會(huì)被home感應(yīng)區(qū)遮住荷辕，影響體驗(yàn)，我們上移34px發(fā)現(xiàn)home感應(yīng)區(qū)的顏色默認(rèn)是黑色件豌，很難看疮方。我的項(xiàng)目的解決方案是在主界面底部設(shè)置一個(gè)我們UI設(shè)計(jì)的顏色，子界面的話動(dòng)態(tài)的改變這個(gè)底部感應(yīng)區(qū)的顏色與當(dāng)前界面的設(shè)計(jì)保持協(xié)調(diào)：
直接上代碼吧：
2.1 在 iphone.scss 加入? 全局?
我的項(xiàng)目底部主要存在這三種顏色茧彤。
2.2 主界面HTML使用css 選擇器 根據(jù)是哪個(gè)界面選擇不同的home感應(yīng)區(qū)背景顏色：?
2.3 主界面ts 通過一個(gè)維護(hù)一個(gè)服務(wù)的列表實(shí)現(xiàn)
2.3 子界面的 寫法：
2.4 服務(wù)：
思路就是這樣骡显，參考Designing Websites for iPhone X，ionic工程復(fù)雜曾掂，底部的適配不同的工程不一樣惫谤，這里僅僅作為參考，如果有疑問我們可以一起交流珠洗，如果有不對(duì)歡迎指點(diǎn)溜歪。
