Phonegap - 由于 vh 单元，iOS 键盘和下拉菜单“压缩”webview

Question

使用 ionic/phonegap 应用程序我遇到了这个问题（仅在 iOS 上）。

当用户需要写一些东西来选择和选项时，iOS 控件（键盘或下拉菜单）会出现，当它这样做时，网络视图会压缩到一半。我在 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" />

键盘隐藏时的图像：

显示键盘时的图像：

在第二张图片上，您几乎无法阅读左侧文字 - 右侧文字，因为输入的高度是 24vh。

我创建了一个我不使用 vh 和 vw 的虚拟页面，这可以正常工作。在 Android 上也可以正常工作。似乎当键盘或下拉菜单出现时，视口的高度会调整大小并且 vh 大小会适应它。

由于我无法将其更改为 px，我正在寻找其他替代方法

Answer 1

在 iOS 上，包含输入元素的父容器不能包含 height:100% 或 100vh，如果您正在尝试这样做的话。我在 iOS 时间选择器上遇到了类似的问题，减小了屏幕尺寸并显示为空白，就像你的一样。

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

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

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

让我知道这是否适合你。