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

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，虽然我更改了“顶部：0.5px;”到 0.1 像素。

Answer 2

100vh 会在您在移动设备上滚动时浏览器的 UI “缩回”时发生变化。如果这会导致您的 .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 栏。我不想失去那些像素。如果您对它始终显示感到满意，那么这是一个很好的解决方案。