Page 240 - Сила CSS3 Освой новейший стандарт

240 • Глава 6. Разные размеры экрана, разный дизайн

разрешением. Например, если открыть нашу страницу на ретиновом дисплее, то
пикселизованные значки продуктов будут смотреться слишком грубо по сравнению
с идеально четким текстом.
Для того чтобы медиазапрос срабатывал только на устройствах iPhone 4, при-
свойте характеристике -webkit-min-device-pixel-ratio значение 2 (это одна из
уникальных характеристик медианосителя, использующихся в браузерах Webkit):
@media screen and (-webkit-min-device-pixel-ratio: 2) {
}

Также существует характеристика медианосителя resolution, позволяющая применять стили
к устройствам с указанным минимальным разрешением dpi, однако в настоящее время
она не поддерживается браузерами на базе Webkit, включая Mobile Safari на устройствах
iPhone 4. Однако ее могут поддерживать другие устройства с дисплеями высокого раз-
решения, так что попробуйте протестировать ее на интересующем вас устройстве.

Этот медиазапрос срабатывает только в том случае, если пикселов устройства ровно
в два раза больше, чем пикселов CSS — как на iPhone 4. Пока что это единственное
устройство, на котором будет использоваться данный медиазапрос, но в будущем
и другие устройства Apple могут быть оборудованы ретиновыми дисплеями. Та-
ким образом, с учетом возможных будущих изменений добавьте к характеристике
медианосителя еще одно условие, описывающее только маленький экран iPhone 4:
@media screen and (-webkit-min-device-pixel-ratio: 2)
¬ and (max-width: 480px) {
}
Теперь мы можем передавать на iPhone 4 более крупные изображения, а затем
сжимать их с помощью свойства background-size фактически, втискивая больше
пикселов в такое же пространство, как и раньше. Добавьте внутрь нового медиа-
запроса следующие правила:
.feature {
-webkit-background-size: 64px 64px;
background-size: 64px 64px;
}
#feature-candy { background-image:
url(images/icon_candy_128-trans.png); }
#feature-pastry { background-image:
url(images/icon_pastry_128-trans.png); }
#feature-dessert { background-image:
url(images/icon_dessert_128-trans.png); }

Эти изображения в два раза больше, чем фактическая область для их отображения:
128×128 пикселов против 64×64. Когда мы сжимаем их до 64 пикселов по каждой

www.trk.kg