javascript - 虚拟键盘缩放网页

这可能是一个愚蠢的问题，但我陷入了困境：我正在构建一个包含大量输入字段的页面。这些输入字段应该填充一定百分比的屏幕，因为不同设备的分辨率会有所不同。因此我会有这样的风格：

input { height: 20%; }

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


所以我的猜测是，当虚拟键盘出现时，它会调整页面大小，并且输入字段有新高度的20%。
在经历了一些挫折之后，我创建了一个除了输入字段之外什么都没有的页面，并检查了是否可以阻止它以某种方式调整大小。以下是不起作用的：
-按百分比设置最小高度
-试图在js中保持页面高度

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

（这是否意味着百分比仅与可见尺寸相关？）
-将输入字段放在具有固定最小高度（像素）的div中
输入字段本身的最小高度（以像素为单位）似乎确实有效，但这不是我要寻找的解决方案。
如何创建虚拟键盘出现时不会调整大小的输入字段？

最佳答案

将高度设置为固定值，而不是百分比。如果将其设置为20%，它将是其父级大小的20%，并与其父级一起缩放，在本例中是整个页面。
您可能希望使用viewport meta标记在不同设备上进行更好的缩放。
https://www.w3schools.com/css/css_rwd_viewport.asp