移动端浏览器弹出键盘时如何避免出现黑白背景

这个问题的核心原因是：当键盘弹出时，移动端浏览器的视口高度会缩小，而原来仅给body设置了渐变背景，且body用固定的height:100%限制了高度，导致键盘上方暴露的区域显示的是html元素的默认背景色。

修复方案 #

给html元素设置相同的渐变背景，同时调整body的高度属性为min-height: 100vh，确保背景能覆盖整个页面的可滚动区域：

* {
  margin: 0;
  padding: 0;
  outline: none;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100vh;
  /* 给根容器设置渐变背景 */
  background: linear-gradient(90deg, #1e88e5 0%, #673ab7 100%);
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.95);
}

.chat-log {
  flex-grow: 1;
  padding: 12px 24px;
}

.message-form {
  flex-shrink: 0;
  padding: 24px;
}

.message-input {
  padding: 12px;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

<body>
  <div class="chat-log">
    <h1>Chat</h1>
  </div>
  <form class="message-form">
    <input class="message-input" />
  </form>
</body>

补充说明 #

• 将背景设置在html上，是因为它是页面的根容器，会自动适配视口变化后的高度，彻底避免背景断层。
• 用min-height: 100vh替代固定的height:100%，既能保证背景覆盖初始视口，也能在页面内容超过视口时延伸背景，同时完美适配键盘弹出后的视口变化。

内容的提问来源于stack exchange，提问作者Amjed Omar