android - Phonegap - 由于 vh 单元，iOS 键盘和下拉菜单 'compress' webview

Question

对于 ionic/phonegap 应用程序，我遇到了这个问题(仅限 iOS)。

当用户需要写东西时 o 选择和选项 iOS 控件(键盘或下拉菜单)出现，当它出现时，web View 被压缩到一半。我在 CSS 中使用 vh 和 vw 度量单位。

我做过/尝试过的:

This post in ionic's forum OP 通过将 vh 和 vw 单位改回像素来解决它。这对我来说不是解决方案。

Ionic keyboard plugin使用方法 cordova.plugins.Keyboard.disableScroll(true);没用。尝试了 false 和 true。

Add parameters to the meta tag不工作。我当前的元数据:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

隐藏键盘时的图像:

显示键盘时的图像:

在第二张图片上，您几乎无法阅读 left text - right text 因为输入的高度是 24vh。

我创建了一个虚拟页面，其中我不使用 vh 和 vw，这工作正常。在 Android 上也可以正常工作。似乎当 de keyboard 或 dropdown 出现时，视口(viewport)的高度会调整大小并且 vh 大小会适应它。

因为我无法将其更改为px，所以我正在寻找其他替代方案

Answer 1

保存输入元素的父容器不能包含 height:100% 或 100vh 在 iOS 上如果那是你想要做的。我在 iOS timepicker 上遇到了类似的问题，缩小屏幕尺寸并显示空白，就像你的一样。

如果键盘高度是 iOS 设备屏幕高度的一半，通常会发生这种情况。在 iPhone 6 等较大的屏幕上，不会发生此问题。

我在调整大小的同一容器上使用了 min-height:480px 和 height:100vh。它解决了我在较小设备上的问题。

这 cordova.plugins.Keyboard.disableScroll(true); 不是必需的。

让我知道这是否适合您。