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

问题描述

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

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