为什么我的背景图像在移动设备上滚动时会调整大小？

Question

由于某种原因，在移动设备上滚动页面时，带有背景图像的 div 会被放大。我用谷歌搜索了一下，似乎其他人也遇到了这个问题，但我没有找到令人满意的解决方案（如果有的话）。但是，我发现了这个：https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm（从这里：https://www.w3schools.com/howto/howto_css_parallax.asp），它工作正常。那么 w3schools 做了什么不同的事情呢？我检查了他们的代码，但没有发现任何有区别的东西。

（仅供参考，即使没有“背景附件：固定；”的视差效果，甚至没有高度的 vh 单位，我仍然遇到问题）。

这是我的代码：

HTML：

<div class="landingContainer">                
    <h1>Welcome to Restaurant</h1>
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
</div>

CSS：

.landingContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),
                    url('/src/components/Home/homeImages/pexels-emre-can-acer-2079438.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  
  width: 100%;
  min-height: var(--vh100);
  padding: 1rem;
  color: white;
  text-align: center; 
  overflow-wrap: anywhere; 
}
.landingContainer h1 {
  font-size: clamp(2.2rem, 2.0058rem + 1.2427vw, 3rem);
    /* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case */
  font-weight: 600;
  margin: 1em 0 .5em;
  color: white;
}
.landingContainer h2 {
  font-size: clamp(1rem, 0.9892rem + 0.0693vw, 1.1rem);
  font-weight: 300;
  width: 85%;
  max-width: 45ch;
  line-height: 1.6;
}

谢谢！

更新：请参阅此处的视频：https://imgur.com/a/ZFWgdqr

Answer 1

问题似乎是顶部自动隐藏的地址栏。 这解决了问题：https://stackoverflow.com/a/61683565/11528872，尽管我更改了“top：0.5px;”至 0.1 像素。

Answer 2

当您在移动设备上滚动时，浏览器的 UI“缩回”时，

100vh

会发生变化。如果这导致您的

.landingContainer

改变尺寸，并且由于您的背景大小是根据带有

background-size: cover;

的容器调整的，那么您将看到它正在调整大小。

w3schools 似乎使用

min-height: 100%;

来设置高度。根据您想做什么，这也适合您。

不久前，我给自己做了一个小工具，可以根据 ≠ 的事物（滚动、调整大小等）来查看哪些值发生变化，哪些值保持不变。也许它对你也有用：https://sheraff.github.io/height/index.html

Answer 3

我遇到了同样的问题，并通过这篇文章解决了它：

https://www.w3schools.com/howto/howto_css_parallax.asp

在页面末尾，他们有一个代码编辑器，其中包含以下代码：

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

最重要的是，我将受影响组件（我正在使用 React）的高度更改为 100%，而不是 100vh（尽管我知道你说过你已经这样做了）。我相信

background-attachment: scroll

应该可以帮到你。只需确保没有其他 CSS 选择器或媒体查询覆盖此修复即可。一开始它对我不起作用，因为我有

backgroundAttachment: 'fixed'

作为内联样式。我将这些组件的所有样式移至我的

index.css

，瞧，它成功了！不过，遗憾的是在手机上失去了视差效果。

如果以上方法都不起作用，请查看这篇通过“黑客”解决问题的精彩文章：

https://css-tricks.com/the-fixed-background-attachment-hack/

Answer 4

是的，问题是 URL 栏自动隐藏，因为每次“显示”/“隐藏”切换时，元素的高度似乎都会发生变化，从而触发背景重新调整（我相信是因为

background-size: cover

）。

该解决方案的问题是我不希望始终显示 URL 栏。我不想丢失这些像素。如果您很高兴它始终显示，那么这是一个很好的解决方案。

Answer 5

根据背景图像的美观程度，您可以简单地添加一个媒体查询，将

background-size: cover;

更改为适合您的情况的静态图像大小。

这可能很实用，特别是如果您的背景图像是某种图案，但通过一些位置调整，它可能是其他类型图像的不错的解决方案。