虚拟键盘缩放网页答案

【问题标题】：Virtual Keyboard scales Web Page虚拟键盘缩放网页
【发布时间】：2017-12-06 13:49:06
【问题描述】：

这可能是一个愚蠢的问题，但我被困住了：我正在构建一个包含一堆输入字段的页面。这些输入字段应占屏幕的一定百分比，因为不同设备的分辨率会有所不同。因此我会有这样的样式：

input { height: 20%; }

我希望它计算高度并保持它，但事实并非如此。

所以我的猜测是，当虚拟键盘出现时，它会调整页面大小并且输入字段有 20% 的新高度。

经过一番挫折后，我创建了一个只有输入字段的页面，并检查了我是否可以阻止它以某种方式调整大小。这是什么不起作用：

-以百分比设置最小高度

-试图在js中保持页面高度

 var initialHeight = document.body.scrollHeight;
        window.onresize = function(event){
            document.body.scrollHeight = initialHeight;
        }

（这是否意味着百分比仅与可见尺寸相关？）

-将输入字段放在一个具有固定最小高度（以像素为单位）的 div 中

输入字段本身的最小高度（以像素为单位）似乎确实有效，但这不是我正在寻找的解决方案。

如何创建一个在虚拟键盘出现时不会调整大小的输入字段？

【问题讨论】：

标签： javascript android html css

【解决方案1】：

将高度设置为固定值，而不是百分比。如果将其设置为 20%，它将是其父级大小的 20%，并随其父级（在本例中为整个页面）缩放。

您可能希望使用视口元标记在不同设备上更好地缩放。 https://www.w3schools.com/css/css_rwd_viewport.asp

【讨论】：