Обрезка фона в iphone, ipad

Обрезка фона в iphone, ipad

В последнем проекте столкнулись с некоторыми ограничениями при верстке сайта под iphone и ipad. Тема была изучена, решения все-таки нашлись о чем и хочу поделиться.
В нашем случае возникли сложности с фоновой картинкой(фотографией), при просмотре сайта на iphone или ipad часть изображения просто обрезалось. Копнув глубже выяснилось, что iOS для мобильных устройств имеет набор ограничений.

Ограничение на физический размер изображения:

  • для устройств с ОЗУ менее чем 256 Мб – 3 Мегапикселя (т.е. физический размер изображения должен быть ≤ 3*1024*1024 или 3 145 728 пикселей)
  • для устройств с оперативной памятью более или равным 256 Мб – 5 Мегапикселей (картинка ≤ 5*1024*1024)
  • для iOS 2.2.1 и более ранее версий, размер картинки не должен превышать 2 Мегапикселя (картинка ≤ 2*1024*1024).

Варианты решения проблемы с большим background:

1. Сделать, специально для iphone и ipad, уменьшенное фоновое изображение и подгружать его через @media. Для всего остального показываем наш большой фон любых размеров.
Пример:

@media screen and (max-device-width: 1024px) {
.global { background: url(images/bg_small.jpg) 0 0  no-repeat !important; } 
}

Т.е. фоновое изображение bg_small.jpg отобразится для блока с классом global для всех устройств с максимальным разрешением 1024.

2. Разрезать фоновую картинку на части, и прописать блоку сразу несколько фонов(CSS3)
Пример:

.global {
background:url(images/bg_part2.jpg) 50% 500px no-repeat, 
url(images/bg_part1.jpg) 50% 0px no-repeat ;
}

Про это и другие ограничения iOS можно почитать на сайте производителя:
Know iOS Resource Limits

Оценить:|
  
Комментировать
Раздел: Браузеры    
Просмотров: 12666
Комментариев (3)
  1. slaffko
    13.01.2012 в 15:21

    Спасибо за статью, возьму на заметку

  2. igorfelix
    18.05.2014 в 13:37

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

  3. Ольга [Olga]
    13.01.2012 в 15:30

    Всегда просто когда знаешь. Мы потратили кучу времени на поиски причины. :)

Оставить комментарий