Cordova 应用程序无法在 iPhone X(模拟器)上正确显示 [英] Cordova app not displaying correctly on iPhone X (Simulator)

查看：41
本文介绍了Cordova 应用程序无法在 iPhone X(模拟器)上正确显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我昨天在 Xcode 9.0 (9A235) 中的 iPhone X 模拟器上测试了我的基于 Cordova 的应用程序，但它看起来并不好.首先，应用内容的上方和下方没有填充全屏区域，而是有一个黑色区域.更糟糕的是，在应用内容和黑色之间有两条白条.

添加 cordova-plugin-wkwebview-engine 以便 Cordova 使用 WKWebView(而不是 UIWebView)进行渲染修复了白条.由于使用 cordova-plugin-wkwebview-engine 时出现的性能和内存泄漏问题，我的应用程序未从 UIWebView 迁移到 WKWebView，当加载从 Inapp Purchase 托管内容下载的图像到 HTML5 画布(直接由于 WKWebView 的安全限制，Webview 无法访问 file://，因此必须通过 cordova-plugin-file 加载图像数据.

这些屏幕截图显示了一个在 <body> 上设置蓝色背景的测试应用.在 UIWebView 的上方和下方，您可以看到白条，但 WKWebView 看不到:


(来源:
(来源::

在视口标签上设置viewport-fit=cover，即:

UIWebView 中的白条随即消失:

去除黑色区域的解决方案(由 )，因此，要涵盖这两种情况，您需要同时重载 CSS 规则并依赖

注意事项:

页脚按钮

  • 如果您的应用有页脚按钮(就像我的一样)，您还需要应用 safe-area-inset-bottom 以避免它们与 iPhone X 上的虚拟主页按钮重叠.
  • 就我而言，我无法将其应用于 ，因为页脚是绝对定位的，因此我需要将其直接应用于页脚:

.toolbar-footer{边距底部:常量(安全区域插入底部)；边距底部:环境(安全区域插入底部)；}

cordova-plugin-statusbar

  • iPhone X 上的状态栏大小已更改，因此旧版本的 cordova-plugin-statusbar 在 iPhone X 上显示不正确
  • Mike Hartington 已经创建了 此拉取请求 应用了必要的更改.
  • 这已合并到 cordova-plugin-statusbar@2.3.0 版本中，因此请确保您至少使用此版本以应用于安全区域插入

启动画面

  • iOS 11/iPhone X 上的 LaunchScreen 故事板约束发生了变化，这意味着在使用现有版本的插件时，启动画面似乎在启动时跳跃"(见这里).
  • 这是在错误报告 CB-13505 中捕获的，修复了 PR cordova-ios#354 并在 cordova-ios@4.5.4，因此请确保您使用的是最近的cordova-ios 平台的版本.

设备方向

  • 在 iOS 11.0 上使用 UIWebView 时，从 Portrait > Landscape > Portrait 旋转导致 safe-area-inset 不会被重新应用，导致内容再次被缺口遮挡(如jms 在下面的评论中突出显示).
  • 如果应用在横向启动然后旋转到纵向，也会发生这种情况
  • 通过 cordova-plugin-wkwebview-engine 使用 WKWebView 时不会发生这种情况.
  • 雷达报告:http://www.openradar.me/radar?id=5035192880201728
  • 更新:这似乎已在 iOS 11.1 中修复

作为参考，这是我打开的原始 Cordova 问题，它捕获了这个:https://issues.apache.org/jira/browse/CB-13273

I tested my Cordova-based app yesterday on the iPhone X Simulator in Xcode 9.0 (9A235) and it didn't look good. Firstly, instead of filling the full screen area, there was a black area above and below the app content. And worse, between the app content and the black was two white bars.

Adding cordova-plugin-wkwebview-engine so Cordova renders using WKWebView (not UIWebView) fixes the white bars. By my app is not migrated from UIWebView to WKWebView due to performance and memory leak issues when using cordova-plugin-wkwebview-engine which occur when loading images downloaded from Inapp Purchase hosted content into an HTML5 canvas (direct file:// access by the Webview is not possible due to security restrictions in WKWebView so the image data must be loaded via cordova-plugin-file).

These screenshots show a test app with a blue background set on the <body>. Above and below UIWebView, you can see the white bars, but not with WKWebView:


(source: pbrd.co)


(source: pbrd.co)

Both Cordova Webviews exhibit the black areas when compared to a native app which fills the full screen area:

解决方案

I found the solution to the white bars here:

Set viewport-fit=cover on the viewport <meta> tag, i.e.:

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

The white bars in UIWebView then disappear:

The solution to remove the black areas (provided by @dpogue in a comment below) is to use LaunchStoryboard images with cordova-plugin-splashscreen to replace the legacy launch images, used by Cordova by default. To do so, add the following to the iOS platform in config.xml:

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

Then create the images with the following dimensions in res/screen/ios (remove any existing ones):

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

Once the black bars are removed, there's another thing that's different about the iPhone X to address: The status bar is larger than 20px due to the "notch", which means any content at the far top of your Cordova app will be obscured by it:

Rather than hard-coding a padding in pixels, you can handle this automatically in CSS using the new safe-area-inset-* constants in iOS 11.

Note: in iOS 11.0 the function to handle these constants was called constant() but in iOS 11.2 Apple renamed it to env() (see here), therefore to cover both cases you need to overload the CSS rule with both and rely on the CSS fallback mechanism to apply the appropriate one:

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

The result is then as desired: the app content covers the full screen, but is not obscured by the "notch":

I've created a Cordova test project which illustrates the above steps: webview-test.zip

Notes:

Footer buttons

  • If your app has footer buttons (as mine does), you will also need to apply safe-area-inset-bottom to avoid them being overlapped by the virtual Home button on iPhone X.
  • In my case, I couldn't apply this to <body> as the footer is absolutely positioned, so I needed to apply it directly to the footer:

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

cordova-plugin-statusbar

  • The status bar size has changed on iPhone X, so older versions of cordova-plugin-statusbar display incorrectly on iPhone X
  • Mike Hartington has created this pull request which applies the necessary changes.
  • This was merged into the cordova-plugin-statusbar@2.3.0 release, so make sure you're using at least this version to apply to safe-area-insets

splashscreen

  • The LaunchScreen storyboard constraints changed on iOS 11/iPhone X, meaning the splashscreen appeared to "jump" on launch when using existing versions of the plugin (see here).
  • This was captured in bug report CB-13505, fixed PR cordova-ios#354 and released in cordova-ios@4.5.4, so make sure you're using a recent version of the cordova-ios platform.

device orientation

  • When using UIWebView on iOS 11.0, rotating from portrait > landscape > portrait causes the safe-area-inset not to be re-applied, causing the content to be obscured by the notch again (as highlighted by jms in a comment below).
  • Also happens if app is launched in landscape then rotated to portrait
  • This doesn't happen when using WKWebView via cordova-plugin-wkwebview-engine.
  • Radar report: http://www.openradar.me/radar?id=5035192880201728
  • Update: this appears to have been fixed in iOS 11.1

For reference, this is the original Cordova issue I opened which captures this: https://issues.apache.org/jira/browse/CB-13273

这篇关于Cordova 应用程序无法在 iPhone X(模拟器)上正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆