"background-size: cover" не распространяется на мобильный экран

У меня есть фото фона на моем сайте, используя background-size:cover. Он работает по большей части, но оставляет в своем портретном режиме странное ~ 30px пустое пространство на моей Galaxy S3.

Я прикрепил скриншот. Линия 1px teal предназначена для иллюстрации всего экрана. Кажется, что фон останавливается сразу после социальных сетей ul s.

Я проверил это, удалив ul, а фон привязал его к нижней части текста тега.

problem screenshot

Кроме того, здесь мой 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;
}

Раньше этого не было, но я, наверное, случайно прослушивал его, пытаясь решить еще одну проблему.

Ответы

Ответ 1

После нескольких попыток разговора, добавив min-height: 100%; к нижней части html под { background:... }, работал у меня.

Ответ 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;
    }
}

Ответ 3

Galaxy S3 имеет ширину более 480 пикселей в портретном или ландшафтном представлении, поэтому я не думаю, что эти правила CSS будут применяться. Вам нужно будет использовать 720px.

Попробуйте добавить:

* { background:transparent }

прямо в конце и переместите ваш html { background:... } CSS после этого.

Таким образом вы можете увидеть, есть ли подвижный нижний колонтитул или любой другой элемент, который вы создали, который мешает, блокируя представление.

Также я бы попытался применить фоновый CSS к телу, а не к HTML. Надеюсь, вы подошли ближе к ответу.

Ответ 4

Текущее решение будет состоять в том, чтобы использовать высоту видового экрана (vh), чтобы указать желаемую высоту. 100% не работает для Mobile Chrome. CSS:

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