android - 移动安卓设备上的 CSS 背景图像全屏并不完美

Question

哇。使用 HTML 和 CSS 创建全屏背景图片有多难？好像挺难的。至少，互联网上充满了这样的答案 css perfect full screen image background还有这个https://css-tricks.com/perfect-full-page-background-image/ .

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

但是我还是没有运气。我复制了样式

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;
}

到我的样式表 https://aoc-2019.netlify.com/css/retro.css而且，背景图像并不完美:https://aoc-2019.netlify.com

初看起来很完美，但是安卓浏览器会在你稍微滚动时隐藏地址栏，然后背景不会调整大小。这会导致页面底部出现一个区域，该区域未被背景图像覆盖。

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

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

Answer 1

页面的结构有几个不同之处。长话短说，阻止它按预期工作的主要因素是将 height: 100% 分配给您的 HTML 元素。你可以在这里阅读 directly from Google's developers website ，分配 height: 100% 为元素提供显示栏的可用高度，并且一旦隐藏就不会调整大小。如果您不想修改和更改代码并需要快速解决方案，只需将高度添加到 HTML 110%，您将获得与比较链接相同的效果。