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

Posted 2023-03-05

【中文标题】CSS - Chrome Mobile - 出现键盘时页面向上移动

【英文标题】：CSS - Chrome Mobile - Page move up when keyboard appears

【发布时间】：2019-12-20 02:09:42

【问题描述】：

我用 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 中。

【问题讨论】：

如果您希望它始终保持在屏幕顶部，则使您的菜单位置固定，但您需要创建一个 minimal reproducible example 来展示您的问题（而不仅仅是显示它的图片）否则这个问题与 SO 无关

可以为菜单添加 html/css 吗？

【参考方案1】：

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

【讨论】：

你是对的。实际上，问题出在组件栏中，有一个 calc(100vh - 60px) 所以我将其更改为静态值，现在它可以正常工作了。非常感谢。