Chrome Mobile上的网站背景是崎岖不平的

Website background on Chrome Mobile is bumpy

本文关键字：背景 Mobile 网站 Chrome      更新时间：2024-03-03

在Chrome Mobile上，我的网站背景非常颠簸，白色部分上下出现故障。据我所知，这是因为隐藏的URL栏。

  • 示例：https://www.youtube.com/watch?v=AtMcbLE803o

我用来添加背景的CSS：

html {
  background: url(user-images/background.png) no-repeat center center fixed;
  background-size: cover;
}
  • 演示：http://jvnknvlgl.github.io/biography-website-template
  • 来源：http://github.com/jvnknvlgl/biography-website-template

我想使用CSS来解决这个问题，但如果我必须使用Javascript，我真的很想简单解释一下它是如何工作的，以及我应该如何将它添加到我的代码中，因为我还没有使用任何Javascript。

提前感谢！

0:14进入视频让我几乎可以肯定这是因为菜单栏隐藏在屏幕顶部。

发生这种情况时，页面的高度会发生变化。这与您的min-height和max-height值直接相关。

试试这个，看看它是否有帮助。可能不会。未应用最小/最大高度。

html {
  background-image: url("user-images/background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

理论：

通过提供最大身高，你的身体高度被限制在可用的屏幕空间内。如果删除此项，则正文高度将是整个文档、整个可滚动区域的大小，即使它不可见。

这应该可以消除闪烁，但可能会影响背景附件。不过，因为您使用的是固定附件，所以这应该仍然可以正常工作。

感谢reddit的And7s，我修复了它！

线索是在我的代码中添加一个带有背景的额外div，然后在该div上使用一些Javascript

这是Javascript：

window.onload = function() {
  document.getElementById('background').style.height= (window.innerHeight+56)+'px';
  }
相关文章：