Почему CSS-размер фона: обложка не работает в портретном режиме на iOS?

Ответ 1

При проверке ориентации обратите внимание на эти пункты из документа Apple -

Предоставить снимки запуска:

Приложения только для iPhone могут иметь только один образ запуска. Он должен быть в формате PNG и измерять 320 x 480 пикселей. Назовите свой образ запуска file Default.png.

Приложения только для iPad: создайте образ запуска для каждой поддерживаемой ориентации в формате PNG. Каждое изображение запуска должно быть 1024 x 748 пикселей (для пейзажа) или 768 x 1004 пикселей (для портрета).

Универсальные приложения: включают изображения запуска для iPhone и iPad.

Обновить настройки Info.plist Укажите значения для UISupportedInterfaceOrientations и UIInterfaceOrientation

и

Не все браузеры распознают ключевое слово обложки для фона и, как результат, просто игнорируют его.

Таким образом, мы можем преодолеть это ограничение, установив размер фона на 100% ширину или высоту в зависимости от ориентации. Мы можем настроить таргетинг на текущую ориентацию (а также на iOS-устройство, используя ширину устройства). С этими двумя пунктами я думаю, вы можете использовать CSS background-size:cover на iOS в портретном режиме

Вот некоторые другие ресурсы, которые я также встречал при поиске решения: Гибкие масштабируемые фоновые изображения, полные масштабируемые фоновые изображения, идеальные масштабируемые фоновые изображения и это обсуждение.

Ответ 2

Ok. Вот как это работает (спасибо @iMeMyself):

body {
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }

Итак, сначала установите его на 100%, затем на cover. Таким образом, все браузеры, которые не могут cover получить 100% значение, в то время как те, которые могут получить 100% перезаписью по обложке.

Ответ 3

Код здесь

Он фиксирует фоновые изображения для ipad

Просто введите размеры в соответствии с вашими размерами изображений

/* Page background-image landscape for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image portrait for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image landscape for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
  }
}
/* Page background-image portrait for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 5024px 2024px !important;
    background-size: 5024px 2024px !important;
  }
}

Ответ 4

Насколько мне известно, этот метод работает на всех устройствах IOS. В зависимости от ваших других элементов страницы (заголовок и т.д.) Вам может потребоваться отрегулировать z-index для параметра &: перед псевэо-элементом.

html {
    height:100% !important;
}

body {
    height:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    // use your own class here //
    &.body-class { 
        // @screen-xs-max is a Bootstrap3 variable name //
        @media screen and (max-width:@screen-xs-max) {
            min-height:100vh;
            position:relative;
            &:before {
                position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                display:block;
                content:"";
                z-index:-1;
                background-image:url(background-image.jpg);
                background-position:center;
                background-size:cover;
                // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes //
                -webkit-background-size:cover;
            }
        }
    }
}

Ответ 5

Согласно Проектирование веб-сайтов для iPhone X iOS 11 представляет новое расширение для существующего метатега viewport, называемого viewport-fit, который обеспечивает контроль над поведением вставки. Значение по умолчанию auto, которое не будет охватывать весь экран.

Чтобы отключить поведение вставки по умолчанию и вывести страницу в полный размер экрана, вы можете установить viewport-fit на cover, как показано ниже:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Без этой настройки существующие технологии, используемые для экранов заставки и полноразмерных изображений героев, могут отображаться не так, как ожидалось, на iPhone X или других совместимых устройствах iOS.