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

Question

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

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



对此：

不知何故，这在 iOS 上永远不会发生，只会在 Android 手机上发生。 （可能是Android的键盘弹出并从浏览器中取出real-space）

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

Answer 1

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

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