材质 UI 文本字段在移动设备上缩放屏幕，导致屏幕截断顶部内容并显示页面底部

Question

每次登录后单击 Material UI 文本字段，屏幕都会被向下推，从而减少页面顶部的内容。

-我检查了我的 CSS，认为可能是因为我将容器高度设置为 100vh，但这不是原因。 -我为屏幕比例低于 450 添加了 CSS，以将高度降低到 80vh，但现在仍然解决了在文本字段中输入内容后页面不会恢复到原来状态的问题

.app-container .unauthorised-view,
.not-found-view,
.login {
  width: 100%;
  height: 100vh;
  background-image: url('../../public/static/media/bg_unauth.jpg');
  background-size: contain;
  background-position: center center;
  background-color: #ededed;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Answer 1

听起来该问题可能与登录后触发布局更改的 Material UI 文本字段的行为有关。一个潜在的原因可能是移动设备上的虚拟键盘在输入字段聚焦时向上推送内容。

您提到将容器高度设置为 100vh 并尝试针对较小的屏幕进行调整，但问题仍然存在。您是否尝试过使用溢出-y：隐藏；在主体或容器上以防止键盘打开时页面滚动？

以下是如何修改 CSS 的示例：

/* Apply this CSS to prevent scrolling when the keyboard is open */
body {
  overflow-y: hidden;
}

/* Then, for smaller screens, adjust the height as needed */
@media screen and (max-width: 450px) {
  .app-container .unauthorised-view,
  .not-found-view,
  .login {
    height: 80vh; /* Adjust as necessary */
  }
}