Phonegap – iOS键盘和下拉“压缩”的Web视图，因为单位

随着离子/ phonegap应用程序，我有这个问题（只在iOS）。

当用户需要写一些select和选项时，会出现iOS控件（键盘或下拉菜单），并在网页视图压缩到一半。 我在CSS中使用vh和vw来测量单位。

我做了什么/试过了：

这个post在离子的论坛 OP解决了它通过改变vh和vw单位回像素。 对我来说这不是一个解决scheme。

使用方法的离子键盘插件 cordova.plugins.Keyboard.disableScroll(true); 没有工作。 尝试错误和真实。

添加参数到元标记非工作。 我目前的元：

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

键盘被隐藏时的图像：

显示键盘时的图像：

在第二张图片上，您几乎无法读取左侧文本 – 右侧文本，因为input的高度为24vh。

我创build一个虚拟页面，我不使用 vh和vw，这工作正常。 在Android上工作也很好。 看起来，当键盘或下拉出现的视口的高度是resize和适应它的大小。

由于我不能改变它px我正在寻找其他的select

Answer 1

持有input元素的父容器不能包含高度：100％或100vh在iOS上，如果这就是你想要做的。 我在iOS timepicker上遇到了类似的问题，缩小了屏幕大小，并像您的一样显示空白。

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

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

这cordova.plugins.Keyboard.disableScroll(true); 不需要。

让我知道这是否适合你。