CSS background-size: замена обложки для мобильного Safari

недавно у меня была подобная проблема, и я понял, что это не из-за background-size:cover но background-attachment:fixed.

я решил проблему с помощью медиа-запроса для iPhone и настройки background-attachment свойство scroll.

для моего случая:

.cover {
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;

    @media (max-width: @iphone-screen) {
        background-attachment: scroll;
    }
}

Edit: блок кода меньше и предполагает предопределенную переменную для @iphone-screen. Спасибо за уведомление @stephband.

также размещены здесь: "background-size: cover" не покрывает мобильный экран

это работает на 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;
    }
}

есть ответы по сети, которые пытаются решить эту проблему, однако ни один из них не работал правильно для меня. Цель: поместите фоновое изображение на body и background-size: cover; работа мобильная, без медиа-запросов,overflows, или hacky z-index: -1;position: absolute; накладки.

вот что я сделал, чтобы решить эту проблему. Он работает на Chrome на Android, даже когда активен ящик клавиатуры. Если кто-то хочет проверить iPhone, что было бы здорово:

body {
    background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
    background-size: cover;
    -webkit-background-size: cover; /* safari may need this */
}

вот это волшебство. Лечить html как обертка с соотношением принудительной высоты относительно фактического видового экрана. Вы знаете классический отзывчивый тег <meta name="viewport" content="width=device-width, initial-scale=1">? Вот почему это. Кроме того, на первый взгляд казалось бы body должны получить эти правила, и это может выглядеть ОК...до изменения высоты, как при открытии клавиатуры.

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}

для версий Safari 5.1 С помощью CSS3 свойства background-size не работает. В таких случаях вам нужно webkit.

так что вам нужно использовать указать фон-в размере.

следовательно использовать -webkit-background-size:cover.

ссылка-версии Safari с использованием webkit

Я нашел следующее На веб-сайте Стивена Гилберта -http://stephen.io/mediaqueries/. Он включает в себя дополнительные устройства и их ориентации. Работает на меня!

Примечание: Если вы скопируете код с его сайта, вы захотите отредактировать его для дополнительных пробелов, в зависимости от используемого редактора.

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }

это правильный код размера фона:

<div class="html-mobile-background">
</div>

<style type="text/css">
html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* To compensate for mobile browser address bar space */
    background: url(YOUR BACKGROUND URL HERE) no-repeat; 
 center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 background-size: 100% 100%
}
</style>

@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}

Я нашел рабочее решение, следующий пример кода CSS ориентирован на iPad:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    html {  
        height: 100%;
        overflow: hidden;
        background: url('http://url.com/image.jpg') no-repeat top center fixed;
        background-size: cover; 
    }

    body {  
        height:100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

}

Ссылка: https://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

html body {
  background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;

  -webkit-background-size: auto auto;
  -moz-background-size: auto auto;
  -o-background-size: auto auto;
  background-size: auto auto;
}