it-roy-ru.com

почему CSS background-size: обложка не работает в портретном режиме на 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 в портретном режиме?

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

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

12
frequent

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

Предоставить стартовые изображения:

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

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

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

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

а также 

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

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

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

8
iMeMyself

Хорошо. Вот как это работает (благодаря @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
frequent

Код здесь

Это исправление фоновых изображений для 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
comonitos

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

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

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

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

1
Josh Habdas

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

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
Russ Jones