最近新做的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都有肥肠详细