要让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都有肥肠详细