CSS-Chrome移动版-出现键盘时页面会向上移动

Question

我用ReactJS实现了一个网页，我有一个带有某些字段的表单，在Chrome电脑版中它可以正常工作，但是当我使用平板电脑或智能手机等移动设备进入表单时，键盘会出现在整个页面上向上移动，Chrome浏览器的导航栏将隐藏我的页面菜单。

以下是流程：

我的下一个元首是

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
    />

该问题仅发生在移动设备的chrome中。

Answer 1

如果我不得不猜测，我会说您有一个 margin-top 或一个 padding-top 且设置了相对单位，例如 vh 。 我之所以这样想，是因为当键盘出现时，视口会缩小，这些单元会自行调整，从而产生这种情况。