虚拟键盘缩放网页

Question

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

input { height: 20%; }

我希望它可以计算高度并保持它，但那不是发生的事情。

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

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

- 以百分比形式设置最小高度

-trying以js

维护页面高度

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

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

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

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

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

Answer 1

将高度设置为固定值，而不是百分比。如果你将它设置为20％，它将是它的父级大小的20％，并使用它的父级进行缩放，在这种情况下是整个页面。

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