“背景大小：盖”不包括手机屏幕(“background-size: cover” does not

我有使用我的网站上的照片背景background-size:cover 。 它的工作原理大部分，但在纵向模式下对我的银河S3怪异〜30像素的白色空间。

我已经附上截图。 的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:

银河S3纵向或横向视图HAVS大于480像素的宽度，所以我不认为这些CSS规则将适用。 您将需要使用720像素。

尝试添加：

* { background:transparent }

就在结束与移动你的html { background:... }之后CSS。

这样，您就可以看到，如果有一个移动页脚股利或您创建了凑了过来，遮挡住了任何其他元素。

此外，我会尝试应用背景CSS身体，而不是HTML。 希望你接近的答案。

Answer 4:

当前的解决方案将是使用视口的高度（VH）来指示所期望的高度。 100％没有为移动浏览器工作。 CSS：

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

文章来源: “background-size: cover” does not cover mobile screen