离子电容器 WKWebView 视口高度不一致

Question

在 iPhone 10+ closing/reopening 之后，我的应用程序视口不一致，我遇到了问题。

起初，视口从它应该的位置开始（屏幕顶部 window.innerHeight = 862px），但在关闭（不完全）并重新打开应用程序后，它位于缺口下方（window.innerHeight = 814px) 将所有内容下推，包括 ionic-toolbar 安全区域。

请参阅下面的 gif，它起初有效，但随后显示错误行为。

https://thumbs.gfycat.com/ValidDampKiwi-mobile.mp4

配置：

Ionic:

   Ionic CLI                     : 6.9.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.0
   @angular-devkit/build-angular : 0.803.29
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 3.0.0

Capacitor:

   Capacitor CLI   : 1.5.1
   @capacitor/core : 1.5.1
   @capacitor/android : 1.5.1
   @capacitor/ios : 2.4.2 # bumped to support iOS 14


Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res (update available: 0.15.2) : 0.11.0
   native-run                             : not installed

System:

   NodeJS : v12.17.0 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina
   Xcode  : Xcode 12.1 Build version 12A7403

这可能是什么问题？感谢您的帮助。

这个问题也很像我的问题：https://github.com/apache/cordova-plugin-wkwebview-engine/issues/108#issuecomment-607461878

Answer 1

我找到了解决办法。我过去曾添加过，试图解决 Capacitor 1.x 中的另一个问题，capacitor.config.json 中的一个参数：

{
    ...
    ios: {
        contentInset: "always"
    }
}

此处引用此参数：https://capacitorjs.com/docs/config

这导致了不一致的错误，但我无法解释为什么...

离子电容器 WKWebView 视口高度不一致

Ionic capacitor WKWebView inconsitent viewport height

viewport

ios

ionic-framework

wkwebview

capacitor