要让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改一下

中加入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都有肥肠详细