Cordova应用程序在iPhone X上无法正确显示（模拟器）
我昨天在Xcode 9.0（9A235）的iPhone X模拟器上testing了我的基于Cordova的应用，看起来不太好。 首先，不是填满整个屏幕区域，而是在应用程序内容的上方和下方有一个黑色区域。 更糟糕的是，应用内容和黑色之间是两个白色条。
添加cordova-plugin-wkwebview-engine以便Cordova使用WKWebView（而不是UIWebView）呈现修复白色条。 由于性能和内存泄漏问题，我的应用程序不会从UIWebView迁移到WKWebView，因为使用cordova-plugin-wkwebview-engine时出现的性能和内存泄漏问题，将从Inapp Purchase托pipe的内容下载的图像加载到HTML5canvas（直接file://由于WKWebView中的安全性限制，Webview是不可能的，因此图像数据必须通过cordova-plugin-file加载）。
这些屏幕截图显示了一个在<body >上设置了蓝色背景的testing应用程序。 在UIWebView的上方和下方，你可以看到白色条，但不能用WKWebView：
cordova网页浏览器与填充全屏幕的本地应用程序相比，显示黑色区域：
我在这里find了白条的解决scheme：
在视口<meta>标签上设置viewport-fit=cover ，即：
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
UIWebView中的白色条消失：
删除黑色区域的解决scheme（在下面的评论中用@dpogue提供）是使用带有cordova-plugin-splashscreen LaunchStoryboard图像replace默认情况下由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创build具有以下尺寸的图像（删除任何现有的图像）：
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中自动处理这个填充。
注意：在iOS 11.0中，处理这些常量的函数被称为constant()但在iOS 11.2中，Apple将其重命名为env() （ 请参阅此处 ），因此要涵盖两种情况， CSS回退机制应用适当的一个：
body{ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }
结果如下：应用内容覆盖整个屏幕，但不被“缺口”遮挡：
我已经创build了一个Cordovatesting项目，说明了上述步骤： webview-test.zip
笔记：
页脚button
- 如果您的应用程序有页脚button（如我的），您还需要应用
safe-area-inset-bottom以避免它们与iPhone X上的虚拟主页button重叠。 - 在我的情况下，我不能将它应用于
<body>因为页脚是绝对定位的，所以我需要直接将它应用于页脚：
.toolbar-footer{ margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom); }
cordova – 插件，状态栏
- iPhone X上的状态栏大小已更改，因此旧版本的
cordova-plugin-statusbar在iPhone X上显示不正确 - 迈克·哈顿顿（Mike Hartington ）创造了这个需求变化的拉动要求 。
- 这被合并到
cordova-plugin-statusbar@2.3.0版本中，所以确保你至less使用这个版本来应用到安全区域插入
闪屏
- LaunchScreen故事板约束在iOS 11 / iPhone X上发生了变化，这意味着在使用现有版本的插件时，启animation面在启动时似乎“跳跃”（ 请参阅此处 ）。
- 这是在错误报告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
手动修复现有的cordova项目
黑色的酒吧
将其添加到您的info.plist文件中。 修复启动图像是一个单独的问题，即如何添加iPhoneX启动图像
<key>UILaunchStoryboardName</key> <string>CDVLaunchScreen</string>
白色的酒吧
在meta标签中设置viewport-fit = cover
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
只需要注意，用于安全区域边界的constant关键字已更新为env for 11.2 beta +
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
请注意，这篇文章： https : //medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd有不同的大小比以上和cordova插件页面：
Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x) Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x) Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x) Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x) Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x) Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x) Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x) Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)
我调整了图像的大小，并更新了ios平台和cordova-plugin-splashscreen到最新的和闪光到白色的屏幕后，第二个问题是固定的。 然而，现在最初的spash图像在底部有一个白色边框。
如果您在全球范围内安装较新版本的ionic ，您可以运行ionic cordova resources并为您生成所有的splashscreen图像以及正确的尺寸。