iOS开发cordova适配iPhone X

1 更新插件

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

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

<preference name="InterceptRemoteRequests" value="all">

2 更新启动图(非常重要、一定要更新)

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

在config.xml中<platform name="ios">下添加

<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);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在前段时间上了热搜的iPhone-x 想必大家就算不知道,都对这个有些许的了解,不知道有都多少基友买了iPhone...
    萧玄辞阅读 2,322评论 0 1
  • 因为 iPhone X 的刘海设计,Web 在 iPhone X 横屏时,可能会有些问题: 默认情况,iPhone...
    萧玄辞阅读 732评论 0 0
  • 北京时间 9 月 12 日凌晨,苹果在乔布斯剧院发布了 iPhone X。iPhone X 正面的全面屏上方有一条...
    邓映山阅读 1,596评论 0 1
  • 每个人内心深处都害怕某些东西。如果你让恐惧主导一切,你就永远无法带着自信向前迈进。因此,想要更有成就,就要养成习惯...
    再回首_心依旧阅读 239评论 0 2
  • 租房的“陷阱”也不少 毕业后,搬出安全便利的宿舍,面对鱼龙混杂的租房市场,毕业生需要警惕哪些“陷阱”? 据媒体报道...
    daring婧阅读 44评论 0 0