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

2022-01-19 00:00:00 google-chrome web frontend html css

我用 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.

这是流程:

我想到了下一个元数据:

I have the next meta in the head:

<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.

推荐答案

如果我不得不猜测，我会说你有一个 ma​​rgin-top 或 aa 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.

相关文章