Исходные изображения CSS неправильно изменяются на iPad и iPhone.

18

Фоновый образ моего сайта хорошо изменяется в Chrome и Safari, используя background-size: cover, но когда я иду тестировать свой сайт на ipad или iphone, фоновое изображение CSS действительно увеличивается и выглядит ужасно. Я прочитал много других вопросов, касающихся этого, и никто не решил мою проблему.

HTML

<div class="background"> 

</div><!--background-->

.background не имеет контейнера и имеет 100% ширину экрана.

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
    
задан chap 03.03.2014 в 09:13
источник
  • попробуйте следующее: width: auto; –  Anand Jaju 03.03.2014 в 09:15
  • Установили ли вы окно просмотра? Например: <meta name="viewport" content="width = device-width, initial-scale = 1"> –  Ruddy 03.03.2014 в 09:16
  • @Ruddy Да, я использую <meta name="viewport" content="width = device-width, initial-scale = 1.0"> –  chap 03.03.2014 в 09:18
  • @AndrewChappell Я думаю, вам стоит взглянуть на это. –  Ruddy 03.03.2014 в 09:21
  • Я попробовал width: auto, но это не сработало –  chap 03.03.2014 в 09:39

2 ответа

43

У меня была такая же проблема, я использовал SCROLL вместо FIXED.

background-attachment:scroll;
    
ответ дан Etienne Dupuis 04.04.2014 в 17:02
источник
  • спасибо спасибо спасибо: D –  J.Pip 06.05.2015 в 23:54
  • Святой курит, спасибо! –  StephenESC 23.07.2015 в 16:38
  • После работы над этой проблемой часами эта проблема исправила мою проблему за считанные секунды. Спасибо! –  Tim Dearborn 25.02.2017 в 18:39
  • Большое спасибо. Может ли кто-нибудь объяснить, почему это работает? Рассматривает ли он рулон ствола как свиток? –  JacobLett 07.03.2017 в 16:01
0

По-видимому, Safari iPad - это понижающая дискретизация изображений выше 1024 пикселей порог. Я попытался использовать scroll вместо fixed , но это не удалось. Другие трюки тоже не работали для меня.

I решил это , разделив мои изначально слишком большие 1600 × 1600 изображение в два изображения. Из-за этого я смог использовать два изображения размером 1024 пикселя и добился еще большей читаемости, чем раньше.

Возможно, обходной путь может работать и для вас.

    
ответ дан WoodrowShigeru 15.10.2014 в 15:12
источник