在移动浏览器中滚动时调整背景大小答案

【问题标题】：Background resizing on scrolling in mobile browser在移动浏览器中滚动时调整背景大小
【发布时间】：2021-04-14 00:44:12
【问题描述】：

我正在尝试为我的网站创建背景，它在桌面上运行良好
但是当我在移动浏览器（chrome）中滚动时，背景开始调整大小，主要是因为浏览器搜索栏隐藏并在滚动时重新出现。

有什么方法可以防止我的背景调整大小？
这是我手机上发生的事情的视频：https://streamable.com/0fplj6

代码如下：

html {
  height: 100vh;
  margin: 0;
  width: 100%;
}

body {
  margin: 0;
  height: 100%;
  ;
  width: 100%;
  background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#header {
  width: 100%;
  height: 50px;
  background-color: black;
}

#header img {
  height: 6rem;
  margin: 1rem;
}

#content {
  width: 70%;
  margin: auto;
  background: yellow;
  overflow: hidden;
}

<body>
  <div id="header"></div>
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
  </div>
</body>

我发现了一个类似的问题
https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome

但它已经 6 岁了，并且没有一个解决方案有效（在纯 css 中）
那么有没有最好使用纯css的解决方案？（如果绝对必要，请使用 vanilla javascript）

【问题讨论】：

您的背景尺寸设置为覆盖，它不是在做它应该做的吗？另外，用真正的手机试试，那个模拟器看起来有点坏。
@ChloeAnderson 是的，背景大小应该可以覆盖，但我希望它避免调整大小，是的，我也确实在手机上尝试过，它给出了同样的问题，我不会问我是否没有测试过:)

标签： javascript html css

【解决方案1】：

罪魁祸首是background-position:fixed，因为它的大小是浏览器屏幕（减去地址栏区域）
诀窍在于使用sticky background。
我测试了下面的代码，它不应该在移动浏览器中向下滚动时调整大小

html,
body {
  margin: 0;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
}

#header {
  height: 50px;
  width: 100%;
  background: black;
}

#rest {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: blue;
}

#content {
  width: 50%;
  z-index: 0;
  grid-row: 1;
  grid-column: 1;
  margin: 0 auto;
  background: yellow;
}

#sticky_back {
  width: 100%;
  height: 100vh;

  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

<body>
  <div id="header"></div>
  <div id="rest">
    <div id="sticky_back"></div>
    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
  </div>
  </div>
</body>

【讨论】：