“background-size：cover”不包括手机屏幕

Question

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

我附上了截图。 1px青色线用于说明整个屏幕。似乎背景在社交媒体ul之后停止。

我通过移除ul并将自身背景附加到标语文字的底部来测试此内容。

此外，这是我的CSS移动肖像视图：

@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

在尝试不同的事情几个小时之后，将min-height: 100%;添加到html下{ background:... }下方为我工作。

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 S3在纵向或横向视图中的宽度大于480px，因此我认为这些CSS规则不适用。您需要使用720px。

尝试添加：

* { background:transparent }

最后＆amp;之后移动html { background:... } CSS。

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

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

Answer 4

目前的解决方案是使用视口高度（vh）来指示所需的高度。 100％不适用于移动Chrome。 CSS：

background-size: cover;
min-height: 100%;