Почему CSS background-size: cover не работает в портретном режиме на iOS?

Я пытаюсь настроить вручную splash-image на всех устройствах. Я делаю это, проверяя orientation (сенсорных устройств) или screen width vs. screen height (нет касания) и установите url соответственно.

затем я добавляю это правило CSS через Javascript:

 document.styleSheets[3].insertRule('.initHandler:before { 
    background: url('+x+') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }', 0)

С x быть изображением, котор нужно нагрузить в зависимости от ориентации и размера экрана.

моя проблема в том, что это отлично работает в landscape режим, но на моем iPad в portrait режим, загружается правильное изображение (различаются в зависимости от портрет / пейзаж), но он не расширен до полноэкранного размера.

вопрос:
Могу ли я не использовать CSS background-size на iOS в портретном режиме?

Спасибо за помощь!

EDIT:
Просто попробовал на своем смартфоне Android. Отлично работает. Не имеет смысла, почему он не работает на iPad.

12
background css ios portrait

5 ответов

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

Обеспечить Запуск Изображения :

iPhone-только приложения может иметь только одно изображение для запуска. Он должен быть в формате PNG и измерять 320 x 480 пикселей. Имя образа запуска файл по умолчанию.формат PNG.

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

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

Обновление Информации.параметры файла plist укажите значения для UISupportedInterfaceOrientations и UIInterfaceOrientation

и

не все браузеры распознают ключевое слово cover для background-size, и в результате просто игнорируйте его.

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

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

8

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% заменяется крышка.

20

здесь код

он фиксирует фоновые изображения для 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;
  }
}
2

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

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;
            }
        }
    }
}
1

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

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

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

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

1