移动端浏览器唤起键盘时背景图尺寸翻倍问题的解决方法

嘿，这个问题我之前也踩过坑！移动端点击输入框弹出键盘时背景图突然变形翻倍，核心原因是background-attachment: fixed在移动端浏览器里的兼容性bug——当键盘唤起后，浏览器可视视口高度被压缩，但fixed定位的背景图会错误计算整体页面高度，再加上你用的background-size: 100% 100%强制拉伸，就出现了尺寸异常的情况。

给你调整后的代码，亲测能解决这个问题：

body {
  margin: 0;
  min-height: 100vh;
  height: 100%;
  overflow-x: hidden;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  position: relative;
}

/* 用伪元素模拟固定背景，避开移动端fixed属性的坑 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url("../src/images/highway.jpg");
}

@media (max-width: 991px) {
  body::before {
    background-image: url("../src/images/highway-m.jpg");
  }
}

关键调整说明： #

• 移除了body上直接设置的背景图和background-attachment: fixed，改用::before伪元素承载背景。伪元素用position: fixed占满全屏，背景层不会随页面滚动或视口变化而变形。
• 把background-size: 100% 100%换成cover，它会保持背景图的比例自动铺满容器，不会强制拉伸导致变形。
• 给body添加position: relative和overflow-x: hidden，确保页面布局稳定，避免出现横向滚动条。

这样修改后，不管键盘是否唤起，背景图都会保持正确的尺寸和比例啦！

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