Background-size: обложка не работает на iOS

Это мой код:

background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;

Работает на настольных, iPad и Android мобильных устройствах:

В Chrome и Safari на iPhone фон слишком большой:

Ответ 1

Это происходит, когда у вас есть background-attachment:fixed. На мобильном телефоне я обычно помещаю background-attachment:scroll внутри запроса @media.

Как отметил @RyanKimber, фиксированные прикрепленные изображения используют весь размер <body>. На мобильном телефоне это может стать очень высоким, что ударит ваш образ. Установка привязки на scroll позволяет вашему обложке растягиваться в пределах своего собственного контейнера.

Ответ 2

Разрабатывая ответ Райана, не добавляя никаких новых html node или используя @media запросы, , используя только один css.

Если вы хотите сохранить cover размер fixed на всех устройствах, включая iOS, без добавления нового node, то трюк состоит в том, чтобы сделать фиксированное позиционирование элемента (тела), а не фон, так как фиксированный фон и размер крышки мешают iOS.

Он работает в производстве как шарм на iOS: https://www.doklist.com/

Этот код не будет работать, поскольку iOS использует высоту document, а не viewport:

body {
      background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Теперь это волшебство, body:after исправлено и не фон:

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Ответ 3

Это также вызвало ряд проблем. Проблема в том, что iOS использует полную высоту и ширину тела вместо видового экрана, чтобы решить размер.

Наше решение заключалось в создании нового <div class="backdrop"></div>.

Мы применяем фон к этому div и придаем ему позицию: absolute; top: 0; bottom: 0; left: 0; right: 0.

Поскольку этот div теперь является размером окна просмотра, background-size: cover работает просто отлично.

Ответ 4

Это сообщение отвечает на ваши вопросы: Почему размер фонового рисунка CSS: обложка не работает в портретном режиме на iOS?

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

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

См. это сообщение для получения дополнительных ресурсов.