【问题标题】:CSS - Chrome Mobile - Page move up when keyboard appearsCSS - Chrome Mobile - 出现键盘时页面向上移动
【发布时间】: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 吗?

标签: html css google-chrome web frontend


【解决方案1】:

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

【讨论】:

  • 你是对的。实际上,问题出在组件栏中,有一个 calc(100vh - 60px) 所以我将其更改为静态值,现在它可以正常工作了。非常感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-10-17
  • 2018-05-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-02-15
相关资源
最近更新 更多