Обрезка фона в 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
Комментарии (3):
Написать комментарий
Вы можете также оставлять комментарии, авторизовавшись в одной из социальных сетей: