Вопрос по html, background, media-queries, css – «Background-size: cover» не распространяется на экран мобильного телефона

14

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

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

Я проверил это, удалив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;
}

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

HTML, CSS для фонового изображения? tobiv
Всего несколько догадок: пробовали ли выhtml { height: 100% }или попытался прикрепить фон кbody вместо ?html tobiv
CSS это 'html {background: url (../ images / bg.jpg) исправлено отсутствие повтора вверху справа; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; } ' Vitaliy G.
html {height: 100%} решил, что возникает новая проблема -- сейчас ландшафтный режим перекрыт только наполовину. Не стесняйтесь взглянуть ..vitaliyg.com Vitaliy G.

Ваш Ответ

4   ответа
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;
    }
}
35

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

Спасибо за совет, Арт! Vitaliy G.
Рассмотреть возможность добавления100vh высоты тоже:stackoverflow.com/a/38532368/2418655 dhaupin
Наконец, проблема, которую кто-то потратил несколько часов, пытаясь решить, и я получил готовый ответ, вносит изменения! Большое спасибо, работал шарм. iforwms
спасибо, что сэкономил мое время. bheatcoker
0

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

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

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

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

* { background:transparent }

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

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

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

Это накрыло экран на полпути. Пользователь выше предложил использовать {height: 100%} в элементе html. Это, казалось, решило эту проблему, но когда устройство переворачивается в горизонтальной плоскости, экран покрыт только наполовину, а для остальных - белым. Не стесняйтесь проверить проблему вживую, если можете. Может быть, так будет проще. Vitaliy G.
Я попробовал это на живом сайте, но я неу нас есть Galaxy S3. Не повезло с моим предложением? Francis Kim
Еще раз спасибо за ваше отредактированное предложение. Я'мы пытались изменитьmax-width: 480px до 720px и добавил этот код в нижней части этого медиа-запроса. Фон по-прежнему не покрывает, прикрепляя себя к нижней части ссылок. Не уверен, что я должен искать. Vitaliy G.
К сожалению нет. Это то, что я видел (это с моего рабочего стола - странно, оригинальная проблема, которую я имел, не могла быть воспроизведена на рабочем столе, даже если была достигнута такая же ширина / высота)i.imgur.com/uZh9q.png Vitaliy G.

Похожие вопросы