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

Posted

技术标签:

【中文标题】离子电容 WKWebView 视口高度不一致【英文标题】:Ionic capacitor WKWebView inconsitent viewport height 【发布时间】:2021-01-18 17:11:48 【问题描述】:

在 iPhone 10+ 上关闭/重新打开后,我的应用视口不一致。

起初,视口从它应有的位置开始(屏幕顶部,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

【问题讨论】:

你需要使用cordova-plugin-wkwebview吗?我相当肯定 Capacitor 默认使用 wkwebview 作为其 webview。 不,我没有,但不需要电容器。它应该默认完全支持 wkwebview。 【参考方案1】:

我找到了解决方案。我过去添加过,试图解决 Capacitor 1.x 中的另一个问题,capacitor.config.json 中的一个参数:


    ...
    ios: 
        contentInset: "always"
    

这里引用了这个参数:https://capacitorjs.com/docs/config

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

【讨论】:

以上是关于离子电容 WKWebView 视口高度不一致的主要内容,如果未能解决你的问题,请参考以下文章

响应式视口字体在移动/ios 设备上不一致

离子电容器广告

离子电容器在目标 CapacitorCordova 中不允许操作

如何解决 HTML5 输入框高度不一致的问题?

android textview高度与字号高度不一致

玩家跳跃高度不一致 - Unity