离子电容 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 视口高度不一致的主要内容,如果未能解决你的问题,请参考以下文章