Ionic: White space in bottom with wkwebview in IOS

问题:

After update IOS to 11 version, I have problem with wkwebview plugin in my app.

Ionic command released IOS 11 checklist but the problem is stay after all steps from checklist.

Ios platform version 4.4.0

Problem on any sim iPnone 5s, 6, 6s...

In screen bottom I have white space. Helps, please.

UPDATE: After i delete cordova-plugin-wkwebview-engine plugin white space is gone. But I need this plugin in my app.

回答1:

About the bottom space when using wkwebview, here is a workaround:

Add some code in cordova-plugin-wkwebview-engine\src\ios\CDVWKWebViewEngine.m between line 99-100,

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

The code above came from cordova-plugin-ionic-webview

回答2:

I uninstallied plugin cordova-plugin-wkwebview-engine and install cordova-plugin-ionic-webview and it`s work perfectly.

回答3:

Add viewport-fit=cover to solve this problem.

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