Question

我昨天在Xcode 9.0（9A235）的iPhone X模拟器上测试了我的基于Cordova的应用程序，但它看起来不太好。首先，不是填满整个屏幕区域，而是在app内容的上方和下方有一个黑色区域。更糟糕的是，应用程序内容和黑色之间是两个白条。

添加cordova-plugin-wkwebview-engine使用WKWebView（不是UIWebView）的Cordova渲染修复了白条。我的应用程序不会从UIWebView迁移到WKWebView，因为使用cordova-plugin-wkwebview-engine时会出现性能和内存泄漏问题，这些问题是在将从Inapp采购托管内容下载的图像加载到HTML5画布时（Webview直接file://访问）由于WKWebView中的安全限制，因此无法通过cordova-plugin-file）加载图像数据。

这些屏幕截图显示了<body＆gt;上设置了蓝色背景的测试应用。在UIWebView的上方和下方，您可以看到白条，但不能看到WKWebView：

与填充整个屏幕区域的原生应用相比，Cordova Webviews都展示了黑色区域：

Answer 1

我找到了白条here的解决方案：

在视口viewport-fit=cover标记上设置<meta>，即：

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

UIWebView中的白条随后消失：

删除黑色区域的解决方案（由@dpogue在下面的评论中提供）是使用LaunchStoryboard images和cordova-plugin-splashscreen来替换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有关的不同之处：由于＆＃34;缺口＆＃34;，状态栏大于20px，表示Cordova应用程序远端顶部的任何内容都会被它遮挡：

您可以使用iOS 11中的新safe-area-inset-*常量在CSS中自动处理这种情况，而不是像素一样对填充进行硬编码。

注意：在iOS 11.0中，处理这些常量的函数称为constant()，但在iOS 11.2中，Apple将其重命名为env()（see here），因此，为了涵盖这两种情况，您需要使用两者重载CSS规则，并依赖CSS fallback mechanism来应用适当的：

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

然后根据需要得出结果：应用内容涵盖整个屏幕，但不会被＆＃34;缺口＆＃34;

遮挡

我创建了一个Cordova测试项目，该项目说明了上述步骤：webview-test.zip

备注：

页脚按钮

如果您的应用有页脚按钮（就像我的那样），您还需要应用safe-area-inset-bottom以避免它们被iPhone X上的虚拟主页按钮重叠。

在我的情况下，我无法将此应用于<body>，因为页脚已完全定位，因此我需要将其直接应用于页脚：

的

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

科尔多瓦-插件-状态栏

iPhone X上的状态栏大小已更改，因此旧版cordova-plugin-statusbar在iPhone X上显示不正确

Mike Hartington已创建this pull request，可应用必要的更改。

这已合并到cordova-plugin-statusbar@2.3.0版本中，因此请确保您至少使用此版本以应用于安全区域内容

溅射屏幕

在iOS 11 / iPhone X上，LaunchScreen故事板约束发生了变化，这意味着闪屏似乎是“跳跃”＃34;在使用现有版本的插件（see here）。
时启动
这是在错误报告CB-13505中捕获的，已修复PR [{3}}并已在cordova-ios#354中发布，因此请确保您使用的是最新版本的cordova-ios平台。

设备方向

在iOS 11.0上使用UIWebView时，从纵向＆gt;旋转风景＆gt;纵向导致safe-area-inset无法重新应用，导致内容再次被凹进模糊（在下面的评论中由cordova-ios@4.5.4突出显示）。

如果应用程序以横向方式启动，然后旋转为纵向
，也会发生这种情况
通过cordova-plugin-wkwebview-engine使用WKWebView时不会发生这种情况。

雷达报告：jms

更新：这似乎已在iOS 11.1中修复

作为参考，这是我打开的原始Cordova问题，它捕获了这个：http://www.openradar.me/radar?id=5035192880201728

Answer 2

手动修复现有的cordova项目

黑条

将此添加到 info.plist 文件中。修复启动图像是一个单独的问题，即How to Add iPhoneX Launch Image

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

白条

在元标记中设置viewport-fit = cover

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

Answer 3

您需要执行3个步骤

对于iOs 11状态栏＆amp; iPhone X标头问题

<强> 1。视口适合封面

将viewport-fit=cover添加到<header>

中的视口的元数据中

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

演示： https://jsfiddle.net/gq5pt509（index.html）

向config.xml内<platform name="ios">

添加更多启动图片

不要跳过此步骤，这是 iPhone X 工作屏幕适合所需的

<splash src="your_path/Default@2x~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->

演示： https://jsfiddle.net/mmy885q4（config.xml）

在CSS上修改您的风格

使用safe-area-inset-left，safe-area-inset-right，safe-area-inset-top或safe-area-inset-bottom

示例：（在您的情况下使用！）

#header {
   position: fixed;
   top: 1.25rem; // iOs 10 or lower
   top: constant(safe-area-inset-top); // iOs 11
   top: env(safe-area-inset-top); // iOs 11+ (feature)

   // or use calc()
   top: calc(constant(safe-area-inset-top) + 1rem);
   top: env(constant(safe-area-inset-top) + 1rem);

   // or SCSS calc()
   $nav-height: 1.25rem;
   top: calc(constant(safe-area-inset-top) + #{$nav-height});
   top: calc(env(safe-area-inset-top) + #{$nav-height});
}

加分：您可以在deviceready

is-android

is-ios

var platformId = window.cordova.platformId;
if (platformId) {
   document.body.classList.add('is-' + platformId);
}

所以你可以在CSS上做这样的事情

.is-ios #header {
 // Properties
}

Answer 4

在我的情况下，每个启动画面都是单独设计的，而不是自动生成或以故事板格式布局，我不得不坚持使用我的Legacy Launch屏幕配置并添加纵向和横向图像以将iPhoneX 1125×2436定位到目标像这样的config.xml：

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

将这些添加到config.xml后（“viewport-fit = cover”已经在index.hml中设置）我使用Ionic Pro构建的应用程序填充了iPhoneX设备上的整个屏幕。

Answer 5

请注意，用于安全区边距的constant关键字已更新为env，用于11.2 beta +

https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Answer 6

如果您在全球范围内安装较新版本的ionic，则可以运行 ionic cordova resources它将为您生成所有的闪屏图像以及正确的尺寸。

Answer 7

修复了iPhone X / XS屏幕旋转问题

在iPhone X / XS上，屏幕旋转将导致标题栏高度使用不正确的值，因为safe-area-inset- *的计算未及时反映UI刷新的新值。即使在最新的iOS 12中，UIWebView中也存在此错误。一种解决方法是插入一个1px的上边距，然后快速将其反转，这将触发安全区域插入*立即被重新计算。修复起来有些丑陋，但是如果您出于某种原因而不得不使用UIWebView，它就可以工作。

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);

代码的目的是使document.body.style.marginTop稍作更改，然后将其反转。不一定必须是“ 1px”。您可以选择一个不会导致UI闪烁但可以达到其目的的值。

Answer 8

我已经开发了两年的cordova应用程序，并且花了数周的时间解决相关问题（例如：键盘打开时Webview滚动）。这是针对ios和android的经过测试和验证的解决方案

P.S .：我正在使用iScroll滚动内容

切勿在index.html的meta标签上使用 viewport-fit = cover ，不要让应用程序停留在状态栏中。 iOS将为所有iPhone版本处理适当的区域。
在XCode中，取消选中隐藏状态栏，然后需要全屏显示，并且不要忘记选择启动屏幕文件作为 CDVLaunchScreen
在config.xml中将全屏设置为 false
最后，（感谢Eddy Verbruggen的出色插件）添加了他的插件cordova-plugin-webviewcolor来设置状态栏和底部区域的背景颜色。此插件可让您设置所需的任何颜色。
在config.xml中添加以下内容（x后面的第一个ff是不透明的）
```
<preference name="BackgroundColor" value="0xff088c90" />
```
通过将焦点事件添加到输入元素来自己处理滚动位置
```
iscrollObj.scrollToElement(elm, transitionduration ... etc)
```

对于android，请执行相同操作，但安装 cordova-plugin-statusbar 和 cordova-plugin-navigationbar-color < / strong>

以下是使用这些插件在ios和android上均可使用的javascript代码：

function setStatusColor(colorCode) { //colorCode is smtg like '#427309'; if (cordova.platformId == 'android') { StatusBar.backgroundColorByHexString(colorCode); NavigationBar.backgroundColorByHexString(colorCode); } else if (cordova.platformId == 'ios') { window.plugins.webviewcolor.change(colorCode); } }

Answer 9

请注意，这篇文章：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图像现在底部有一个白色边框。

Cordova应用程序无法在iPhone X（模拟器）上正确显示

9 个答案:

您需要执行3个步骤