Cordova应用程序在iPhone X上无法正确显示

Cordova应用程序在iPhone X上无法正确显示

在视口<meta>标签上设置viewport-fit=cover,即

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

UIWebView中的白色条消失:

删除黑色区域的解决方案(在下面的评论中由@dpogue提供 )是使用带有cordova-plugin-splashscreenLaunchStoryboard图像替换默认情况下由Cordova使用的传统启动图像。 为此,

请在config.xml中将以下内容添加到iOS平台中:

<platform name="ios">    
    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />   

    <!-- more iOS config... -->
</platform>

然后在res/screen/ios中创建具有以下尺寸的图像(删除任何现有的图像):

Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732

一旦黑条被删除,iPhone X的另一个不同之处就是:由于“缺口”, 状态栏大于20px,这意味着在你的Cordova应用程序的最上方的任何内容都会被它遮挡:

相比较为单位对填充进行硬编码而言,你使用iOS 11中的新的safe-area-inset-*常量在CSS中自动处理这个填充。

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

结果如下:应用内容覆盖整个屏幕,但不被“缺口”遮挡:

我已经创建了一个说明上述步骤的Cordova测试项目:(webview-test.zip)

注意

如果您的应用程序有页脚按钮(如我的),您还需要应用安全区域插入底部,以避免它们与iPhone X上的虚拟主页按钮重叠。

在我的情况下,我不能将它应用于,因为页脚是绝对定位的,所以我需要直接将它应用于页脚:

.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}
  • cordova-plugin-statusbar

iPhone X上的状态栏大小已更改,因此旧版本的cordova-plugin-statusbar在iPhone X上显示不正确 迈克·哈顿顿(Mike Hartington)创造了这个需求变化的拉动要求。 这被合并到cordova-plugin-statusbar@2.3.0版本中,所以确保你至少使用这个版本来应用到安全区域

  • splashscreen

LaunchScreen故事板约束在iOS 11 / iPhone X上发生了变化,这意味着在使用现有版本的插件时,启动画面在启动时似乎“跳跃”(请参阅此处)。 这是在错误报告CB-13505中捕获的,固定的PR cordova-ios#354,并以cordova-ios@4.5.4发布,因此请确保您使用的是最新版本的cordova-ios平台。

  • device orientation

在iOS 11.0上使用UIWebView时,从portrait> landscape> portrait旋转将导致安全区域插入不被重新应用,从而导致内容再次被缺口遮挡(如下面注释中的jms所示)。 如果应用程序在横向启动,然后旋转到肖像也会发生 当通过cordova-plugin-wkwebview-engine使用WKWebView时,不会发生这种情况。 雷达报告:http://www.openradar.me/radar?id = 5035192880201728 更新:这似乎已经在iOS 11.1中修复


文章转载:https://stackoverflow.com/questions/46232812/cordova-app-not-displaying-correctly-on-iphone-x-simulator

有疑问、勘误、请您在下方留言,谢谢合作!

感谢您阅读,这篇文章归 极客点子版权所有.
如果转载,请注明出处: 极客点子版权所有(/page/829.html) 知识共享许可协议
本网站使用 创作共用 归属 - 非商业用途 - 共享4.0国际许可协议的相同方式 许可.

关于作者:

    作者:

    reverse()

    简介:

    nodejs 全栈工程师 、作家、github 开源爱好者
    研究方向:数据分析、 深度学习、 服务器架构、 系统原理

    著作:

    最爱的编程语言:

    Javascript
    Python