Проблема с CSS на мобильном Safari

Я пытаюсь создать полноэкранный div, до сих пор он отлично работает на хроме, firefox и сафари, но на ipad и iphone фоновое изображение и размер div удаляются пропорционально. Вот то, что я до сих пор:Проблема с CSS на мобильном Safari

HTML

<div class="intro"> 
(content) 
</div>

CSS

.intro { 
    width:100%; 
    min-height: 100vh; 
    margin: 0; 
    background-image: url("../img/background.jpg"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    height: 100%; 

}

Как я могу решить эту проблему на мобильном Safari? Спасибо

источник

2014-11-23 Juan Felipe Cadavid

Я предлагаю вам использовать Media Queries для управления внешним видом вашего сайта для разных разрешений. Также рекомендуется проверять ваши сайты на реальных устройствах, а не на любом симуляторе, если это так.

Вот ссылка о том, как использовать медиа-запросы: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

С уважением

источник

2014-11-23 15:48:15 Alessandro26

Да, я использую медиа-запросы, сайт выглядит так, как будто я хочу, чтобы он выглядел на разных размерах экрана, но главная проблема возникает, когда он запускается в браузере Safari на iPad и iPhone. –

Здесь вы идете. Полноэкранный фон.

http://www.minimit.com/articles/solutions-tutorials/fullscreen-backgrounds-with-centered-content

источник

2014-11-23 16:01:04 Betkowski

В качестве другого плаката выше отмечено, запросы средств массовой информации являются хорошей практикой для АВД. Полноэкранные сайты на рабочем столе могут выглядеть красиво, но часто из-за раздумий на мобильных устройствах даже большие, такие как iPhone 6+. Вероятно, потребуется немного экспериментов в медиа-запросах, чтобы понять это правильно.

Также обратите внимание на размер файла для изображений на мобильных устройствах - я недавно помог на сайте, нуждающемся в помощи по аналогичной проблеме. Хотя дисплей на мобильном телефоне выглядел хорошо, в конце он просто уменьшил те же изображения, что и для настольного дисплея, что привело к низкой производительности (даже на 4G LTE). Это может занять немного времени, но использование оптимизированных для мобильных устройств наборов изображений стоит того.

источник

2014-11-23 18:00:39 karolus

У меня возникают проблемы с временем загрузки, но пока это работает прилично. Существуют ли более конкретные медиа-запросы? Я определяю точки останова, основанные только на ширине экрана –

Проблема с CSS на мобильном Safari

ответ

Смежные вопросы