CSS 背景图像在移动设备上全屏 android 设备不完美

Question

哇。 使用 HTML 和 CSS 创建全屏背景图像有多难？ 好像还蛮难的。 至少，如果互联网上充满了css 完美全屏图像背景和https://css-tricks.com/perfect-full-page-background-image/ 之类的答案。

事实上，第二个链接的演示也适用于移动 android 设备： https://css-tricks.com/examples/FullPageBackgroundImage/progressive.ZE1BFD762321E409CEE4AC0B6E841963

但我仍然没有运气。 我复制了样式

html {
    background: url(/images/snowback.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

To my stylesheet https://aoc-2019.netlify.com/css/retro.css and still, the background image is not perfect: https://aoc-2019.netlify.com

它首先看起来很完美，但是当您滚动一点时，Android 浏览器会隐藏地址栏，然后背景不会调整大小。 这会导致页面底部的区域未被背景图像覆盖。

正如我所说，上面的演示效果很好。

我的页面和演示有什么区别？ 任何想法？

Answer 1

我可以轻松发现的差异是...

CSS-Tricks 版本：html 和 body 没有高度或最小高度。

您的版本：html 和 body 的高度和最小高度都设置为 100%。

CSS-Tricks 版本：正文设置为overflow-x: hidden;

您的版本：正文没有溢出规则。

我建议你准确地复制他们所做的，不添加任何内容，确保它按预期工作。 然后在您的站点中重新创建它。

如果事实证明 100% 的高度和最小高度是问题所在，但您需要这些作为粘性页脚或其他东西。 然后，您可以使用辅助包装 div 来促进您的粘性页脚。 就像将高度/最小高度规则放在一个完整的包装器 div 上，然后在其中使用带有粘性页脚的页面包装器。

Answer 2

页面的结构有几个不同之处。 长话短说，阻止它按预期工作的主要因素是 height: 100% 分配给您的 HTML 元素。 正如您可以直接从 Google 的开发者网站上阅读的那样，分配 height: 100% 为元素提供了显示栏时可用的高度，并且一旦隐藏就不会调整大小。 如果您不想修改和更改代码并需要快速解决方案，只需将高度 110% 添加到 HTML 即可获得与比较链接中相同的效果。