CSS-Chrome移动版-出现键盘时页面会向上移动 [英] CSS - Chrome Mobile - Page move up when keyboard appears

问题描述

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

I implemented a web page with ReactJS, I have a form with some fields, in Chrome for computers it works ok, but when I go in the form using a mobile like a Tablet or Smartphone, when the keyboard appears all the page move to up and the menu of my page is hiden by the navigation bar of the Chrome navigator.

以下是流程:

我的下一个元首是

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

该问题仅在适用于移动设备的chrome中发生.

The problem only happens in chrome for mobile devices.

推荐答案

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

If I had to guess, I would say that you have a margin-top or a a padding-top set with relative units like vh. I think of this because when the keyboard appears, the viewport will be reduced and these units will ajust themselves, making these kind of situations.

这篇关于CSS-Chrome移动版-出现键盘时页面会向上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！