要讓cordova項目適配iphoneX + ios11.4，總共要幾步？三步

最近新作的app被客戶要求適配iphoneX，令我犯惹難，由於我不會並且本窮苦girl都沒用過iphoneX，可咋辦呢😢
查唄
通過我在網上長時間的衝浪查找，發現適配iphoneX其實只須要三步

第一步：裝一個插件吧

cordova plugin add cordova-plugin-splashscreen

安裝splashscreen 插件
並在config.xml文件中添加iphoneX的啓動圖片（尺寸爲1125 * 2436）
(有的時候在config.xml文件中添加可能會檢測失敗，能夠嘗試在Xcode中, Resources文件夾-images.xcassets中添加啓動圖片。方法爲將圖片拖動到想要設置的手機版本框內就能夠了。）
效果變這樣

上面仍是好醜哦！咋辦呢？

第二步：meta改一下

<meta name="viewport">中加入viewport-fit=cover

效果變這樣

大家怎麼擠到一塊兒了啊！
看來不是大家太騷，就是個人header不夠高
有請第三步！

第三步：加個padding

.header{
     padding-top: **constant(safe-area-inset-top)**; 
     padding-top: **env(safe-area-inset-top);** /* 肥腸重要
 }

Webkit在iOS11中新增CSS Functions:env()替代constant()，文檔中推薦使用env()，而constant()從Safari Techology Preview 41 和iOS11.2 Beta開始會被棄用。env()用法如同var()，在不支持env()的瀏覽器中，會自動忽略這同樣式規則，不影響網頁正常的渲染

好多文章由於發佈時間較早，都只寫了constant()，因此在ios11.4下徹底很差用

關於這兩個方法能夠看文章最下的參考文章 iPhone X的缺口和CSS
我上面那段也是直接從人家文章裏複製過來的嘻嘻嘻

最終效果

哼哼，完美解決

---

參考文章 https://blog.phonegap.com/dis...
correctly-on-the-iphone-x-c4a85664c493

Displaying a PhoneGap App Correctly on the iPhone X
徹底照這篇文章的作的，靴靴國外大佬，等我靜下心來再用我幼兒園水平英語仔細拜讀一遍

參考文章 https://www.w3cplus.com/css/t...

iPhone X的缺口和CSS對safe-area-inset-top和viewport-fit=cover都有肥腸詳細