iOS开发cordova适配iPhone X

1 更新插件

需要更新的插件有cordova-plugin-splashscreen、cordova-plugin-statusbar、cordova-plugin-ionic-webview。

更新完webview的插件之后会出现网络请求失败的问题(跨域问题)，解决方案添加 cordova-plugin-wkwebview-file-xhr 插件。并在config.xml添加配置

"InterceptRemoteRequests" value="all">

2 更新启动图（非常重要、一定要更新）

问UI要一张1125x2436的启动页 放入项目中

在config.xml中下添加

<splash height="2436" src="图片路径名称.png" width="1125" />

并将该图片放入Xcode的Images.xcassets对应的位置中
完成这一步其实就已经有效果了。只是不能全屏。

3 更新HTML viewport meta

meta 标签中 添加 viewport-fit=cover，这是 ios 11 新增的设置，可以让页面全屏展示。

<metaname="viewport"content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

4 结合苹果的安全域微调

在合适的地方加上

margin-top: env(safe-area-inset-top);

margin-bottom: env(safe-area-inset-bottom);

简书链接https://www.jianshu.com/p/446c533156bc