"background-size: cover“不覆盖手机屏幕

Question

我在我的网站上有一个使用background-size:cover的照片背景。它在很大程度上可以工作，但在纵向模式下，我的Galaxy S3上留下了一个奇怪的大约30px的空白区域。

我附上了一张截图。1px的蓝绿色线条用于说明整个屏幕。似乎在社交媒体ul%s之后，背景就停止了。

我通过删除ul和背景将其自己附加到标语文本的底部进行了测试。

​

​

另外，这是我的CSS关于移动portait视图：

@media only screen and (max-width: 480px) {

.logo {
    position: relative;
    background-size:70%;
    -webkit-background-size: 70%;
    -moz-background-size: 70%;
    -o-background-size: 70%;
    margin-top: 30px;
}   

h1 {
    margin-top: -25px;
    font-size: 21px;
    line-height: 21px;
    margin-bottom: 15px;
}

h2 {
    font-size: 35px;
    line-height: 35px;
}

.footer_mobile {
    display: block;
    margin-top: 20px;
    margin-bottom: 0px;
}

li {
    display: block;
    font-size: 1.3em;
}

这在过去是不会发生的，但我猜我在尝试解决另一个问题时意外地窃听了它。

Answer 1

在尝试了几个小时后，在{ background:... }下的html底部添加min-height: 100%;对我来说很管用。

Answer 2

这适用于Android 4.1.2和iOS 6.1.3 (iPhone 4)以及桌面交换机。为响应式站点编写。

以防万一，在您的HTML头中，类似这样的内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML：

<div class="html-mobile-background"></div>

CSS：

html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 125%; /* To compensate for mobile browser address bar space */
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%;
}

@media (min-width: 600px) {
    html {
        background: url(/images/bg.jpg) no-repeat center center fixed; 
        background-size: cover;
    }
    .html-mobile-background {
        display: none;
    }
}

Answer 3

无论是纵向还是横向，Galaxy的宽度都超过480px，所以我不认为这些S3规则适用。你需要使用720px。

尝试添加：

* { background:transparent }

就在最后&在那之后移动你的html { background:... } CSS。

通过这种方式，您可以查看是否有移动脚注div或您创建的任何其他元素阻碍了视图。

此外，我会尝试将背景CSS应用于正文，而不是HTML。希望你能更接近答案。