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

Question

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

事实上，第二个 link 的演示也适用于移动 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 and still, the background image is not perfect: https://aoc-2019.netlify.com

初看起来很完美，但是Android浏览器会在滚动时隐藏地址栏，然后背景不会调整大小。这会导致页面底部的区域没有被背景图像覆盖。

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

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

Answer 1

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

CSS-技巧版本：html 并且 body 没有高度或最小高度。

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

CSS-技巧版：正文设置为overflow-x: hidden;

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

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

如果事实证明 100% 高度和最小高度是问题所在，但您需要它们来制作粘性页脚或其他东西。然后你可以使用辅助包装器 div 来方便你的粘性页脚。就像将 height/min-height 规则放在完整包装器 div 上，然后在其中像往常一样使用带有粘性页脚的页面包装器。

Answer 2

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

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

CSS Background Image full screen on mobile android devices not perfect

html

css

android

background-image