响应式设计：当移动键盘处于活动状态时，一切都会缩小

Question

现在浏览器中有很多屏幕分辨率，因此在我的CSS尺寸中使用px实际上并不是一个好主意。我采用并使用vh代替px，因为它基于当前视口的大小，然后调整textbox / img / div或任何具有size: ...vh;的内容

这实际上很好，但不知何故，当我尝试点击文本框然后键盘出现时，东西会从此调整大小并缩小：



对此：

这种情况从未发生在iOS上，仅在Android手机上发生过。 （这可能是Android的键盘弹出并从浏览器中取出真实空间）

有没有办法解决这个问题，如果没有，无论如何，我是否可以调整我的文本框/ div仍然能够响应任何移动分辨率？谢谢！

Answer 1

由于Android键盘可能会占用浏览器中的实际空间，因此视口高度会降低，导致所有内容缩小。在这种情况下，您可以使用像素而不是vh，因为我认为使用vh并不重要。在这种情况下使用像素不会影响网站的响应能力。

如果有帮助，您还可以查看此thread。