Поддержка устройств с Retina дисплеем.



Введение

Сегодня на рынке доступны устройства с экранами с широким диапазоном пиксельной плотности. Отличительной особенностью некоторых устройств, таких как iPhone 5, iPad, MacBook Pro, являются дисплеи с высокой разрешающей способностью. Как веб-разработчики или дизайнеры, мы должны гарантировать качественный внешний вид нашего веб-сайта или веб-приложения на устройствах с высокой пиксельной плотностью. Чтобы избежать размытия изображения на устройствах с высокой пиксельной плотностью, мы должны обеспечить более высокое разрешение изображений на нашем веб-сайте или веб-приложении, используя последнюю CSS функцию Webkit, названную — “Image Set“. Используя функцию Image Set, браузер может определить пиксельную плотность устройства пользователя и показать пользователю подходящую версию изображений.

Использование CSS Image Set

Вот пример использования CSS Image Set:

.myImage {
    background: -webkit-image-set( url(images/bg.jpg) 1x, url(images/bg_2.jpg) 2x);
    height: 300px;
    width: 300px;
}


Как Вы видите выше, мы применяем функцию Image Set к свойствам фона. В функции Image Set 1x приравнивается к стандартной версии изображения; 2x приравнивается к изображению с высокой разрешающей способностью. Это заставляет браузер выбирать и использовать в качестве фона изображение с высокой разрешающей способностью, в случае если устройство пользователя имеет высокую пиксельную плотность, иначе ему будет предоставлена стандартная версия изображения.

Примите во внимание, что значения высоты и ширины класса CSS должны соответствовать стандартным размерностям плотности изображения, поскольку CSS пиксели — это не то же самое, что пиксели устройства, это означает, что 1 пиксель CSS соответствует 1 пикселю устройства на устройствах стандартной плотности. Однако, на устройствах с высокой плотностью, в каждом пикселе CSS есть 4 пикселя устройства.



Поддерживаемые браузеры

Функция Image Set CSS в настоящее время поддерживается только Safari 6 и Chrome 21, использующих webkit префикс. Сейчас функция Image Set только обсуждается, и не является частью спецификации CSS4. Это может измениться в любой момент.

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.