背景大小:覆盖导致背景图像在移动Chrome触摸调整大小

Background-size: cover causing background image to resize on touch in mobile Chrome

本文关键字：背景 移动 Chrome 调整 触摸 覆盖 图像      更新时间：2023-09-26

我遇到了一个问题，我正在将移动设备中页面的背景图像设置为专为移动设备设计的新图像。该图像设置为background-size: cover，并且在除移动Chrome之外的所有内容中工作良好。在移动Chrome中滚动时，图像会稍微调整大小。该设计还具有绝对页脚。你可以在这里看到它的作用:

body {
  height: 100%;
  overflow: scroll;
  }
.image {
  display: block;
  background: url(http://drawingimage.com/files/1/Shrek-Donkey-Beautiful-Image-Drawing.png) no-repeat center bottom;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.footer {
  display: block;
  position: absolute;
  width: 100%;
  bottom: -69px;
  background-color: green;
}
<body>
  <div class="wrap">
    <div class="image">
    </div>
    <div class="footer">
    <p> Footer info </p>
    <p> More footer info</p>
    </div>
  </div>
</body>

如果它覆盖了背景，那么它为滚动留出了空间。也许会约束容器。或者考虑使用任何类型的媒体查询来捕捉移动设备大小的问题。将其切换为仅在移动设备上包含。或者移除移动设备上的溢出滚动

相关文章：