Retina display и картинки

После большого перерыва решил написать очередной пост. В этот раз речь пойдёт о разработке мобильных версий сайтов, а точнее, о сайтах которые будут отображаться на iPod/iPhone 4.

На iPhone дисплей имеет разрешение 640×960 пикселей при диагонали всего в 3.5 дюйма, то есть где‐то 326 ppi (Pixel Per Inch), но в window.screen.width и window.screen.height хранят в себе значения в 2 раза меньше оригинальных. Это было сделано для того, чтобы сайты сделанные для iPhone 3 отображались так же красиво на iPhone 4, у которого разрешение в два раза больше.

Такой подход хороший, но в нём есть один недостаток, изображения увеличиваются в два раза чтоб отобразиться правильно. Всё бы ничего, но вот изображения становятся качеством на порядок хуже. Например, на рис. 1 показано как отобразится изображение на iPhone 3:

рис. 1

на рис. 2 показано как это же изображение отобразится на iPhone 4:

рис. 2

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

Приступим

Первое что нам нужно, это два изображения с разрешением 57×57 и 114×144 пиксела. Второе изображение необходимо сохранить с именем вида icon‐rss@2x.png. Для начала напишем стиль для iPhone 3:

.rss-icon {
    width:57px; height:57px;
    background:url(rss-icon.png) no-repeat;}

что даст нам нечто вроде того, что на рис. 3.

рис. 3

На iPhone 3 смотрится отлично, но вот на iPhone 4 будет то, что на рис. 4.

рис. 4

Для исправления этого необходимо добавить стиль:

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .rss-icon {
        width:57px; height:57px;
        background:url(rss-icon@2x.png) no-repeat;
        background-size:57px 57px;}
}

И в итоге мы получим то, что на рис. 5.

рис. 5

Вроде бы все проблемы решены, но увы, нет… Такой проблеме подвержены не только фоновые изображения, но и простые, вставленные через тег img. Для того чтобы избавиться от «растягивания» изображений, им необходимо установить фиксированную ширину, и указать src на картинку с размером в два раза больше. Если с фоновыми картинками мы можем обойтись простым стилем, то для картинок нам придётся использовать JavaScript.

rss

Здесь мы по умолчанию подключаем изображение для iPhone 3 с размером 57×57 пикселей, и «сразу же» меняем адрес картинки если devicePixelRatio больше или равно 2.

Заключение

Как мы видим, ничего невозможного нет. Все изображения были взяты из этой статьи.

Предоставленный в статье говнокод распространяется «As Is» — как есть, и я не несу никакой ответственности.

comments powered by Disqus