“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%; { background:... }下的html底部为我工作。

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 }

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

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

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

Answer 4

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

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