离子：底部的白色空间与IOS 11中的wkwebview

Question

将IOS更新为11版后，我的应用中遇到wkwebview plugin问题。

离子命令发布了IOS 11 checklist但问题是在检查清单的所有步骤之后仍然存在。

Ios平台版本4.4.0

任何SIM iPnone 5s，6,6s ......的问题

在屏幕底部我有空白区域。请帮助。

更新：删除cordova-plugin-wkwebview-engine插件后，空白区域消失了。但是我的应用程序中需要这个插件。

Answer 1

我卸载了插件cordova-plugin-wkwebview-engine并安装了cordova-plugin-ionic-webview，它完美无缺。

Answer 2

关于使用wkwebview时的底层空间，这是一个解决方法：

在第99-100行之间的cordova-plugin-wkwebview-engine \ src \ ios \ CDVWKWebViewEngine.m中添加一些代码，

// re-create WKWebView, since we need to update configuration
WKWebView* wkWebView = [[WKWebView alloc] initWithFrame:self.engineWebView.frame configuration:configuration];
//add begin
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000
if (@available(iOS 11.0, *)) {
  [wkWebView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
}
#endif
//add end
wkWebView.UIDelegate = self.uiDelegate;
self.engineWebView = wkWebView;

上面的代码来自cordova-plugin-ionic-webview

Answer 3

所提供的解决方案均不适合我。 对于iOS 11+，请尝试以下操作，解决了我的问题。

将以下行添加到您的config.xml

<plugin name="cordova-plugin-disable-ios11-statusbar" source="npm" spec="*"/>

祝你好运！

Answer 4

与其禁用滚动或强制移除 Web 框架上的安全区域，更好的永久性修复是更改 Ionic 在屏幕上垂直拉伸应用程序的方式。根据此线程中的发现，它应该使用 height: 100vh 而不是 height: 100%：https://issues.apache.org/jira/browse/CB-12886

<块引用>

我有新信息要添加到此错误中，并重申它不是 Cordova 错误。让我介绍 3 个场景：

• viewport-fit=auto 和 CSS height: 100% 在 body 元素上：
  UIWebView： webview 是设备屏幕的高度，减去不安全区域，在顶部偏移不安全区域。
  WKWebView： webview 是设备屏幕的高度，减去不安全区域，在顶部偏移不安全区域。
• viewport-fit=cover 和 CSS height: 100% 在 body 元素上：
  UIWebView：webview 是设备屏幕的高度。
  WKWebView：webview是安全区域的高度，在底部显示一个间隙。
• viewport-fit=cover 和 CSS height: 100vh 在 body 元素上：
  UIWebView：webview 是设备屏幕的高度。
  WKWebView：webview 是设备屏幕的高度。

在我的主 SCSS 文件中，导入 Ionic 后，我设置了：

html {
    height: 100vh;
}

Answer 5

添加viewport-fit = cover即可解决此问题。

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