После большого перерыва решил написать очередной пост. В этот раз речь пойдёт о разработке мобильных версий сайтов, а точнее, о сайтах которые будут отображаться на 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([email protected]) no-repeat;
background-size:57px 57px;}
}
И в итоге мы получим то, что на рис. 5.
рис. 5
Вроде бы все проблемы решены, но увы, нет… Такой проблеме подвержены не только фоновые изображения, но и простые, вставленные через тег img. Для того чтобы избавиться от «растягивания» изображений, им необходимо установить фиксированную ширину, и указать src на картинку с размером в два раза больше. Если с фоновыми картинками мы можем обойтись простым стилем, то для картинок нам придётся использовать JavaScript.
Здесь мы по умолчанию подключаем изображение для iPhone 3 с размером 57×57 пикселей, и «сразу же» меняем адрес картинки если devicePixelRatio больше или равно 2.
Заключение
Как мы видим, ничего невозможного нет. Все изображения были взяты из этой статьи.
Предоставленный в статье говнокод распространяется «As Is» — как есть, и я не несу никакой ответственности.