Дисплей Ретина

Многие люди для работы и развлечений используют мобильные устройства. Производители таких устройств стремятся привлечь к своей продукции еще больше пользователей, изготавливая мобильные устройства мощнее и проще в использовании. Apple, изготовил совершенно новую линейку продукции “Дисплей Retina”.

Особенность дисплея Ретина — это двойная плотность пикселей. На устройстве с маленьким дисплеем, но с двойной плотность пикселей, изображение отображается более четче. Другие производители устройств следуют этому примеру, и делают свою версию дисплеев “Desnity” с высокой плотностью пикселей.

Для того чтобы пользователи устройств с дисплеем Ретина ощутил весь потенциал двойной плотности пикселей веб-разработчикам потребуется совместить свои веб-сайты и приложения с дисплеем Ретина.

— ломается ли разметка сайта на таких устройствах?

Разметка сайта на дисплее Ретина с двойной плотностью пикселей не ломается. Просто сайты выглядят нечеткими и видно артефакты на изображениях с низким разрешением.

Разрешение и плотность экрана

Самая маленькая физическая единица на дисплее — это пиксель. Большое количество пикселей разной яркости и цвета формируют изображение. Незаметное расстояние между пикселями делает изображение четче и ярче. Плотность дисплея ссылается на общее число таких пикселей известное как DPI или разрешение пикселей на дюйм.

Термин Retina применяется для определения дисплеев Apple с двойной плотностью пикселей. С высоким разрешением дисплея как у Ipad Retina и MacBook Pro, практически невозможно на обычном расстоянии увидеть пиксели.

к меню ↑

Единица измерения в CSS

Пиксель в CSS является абстрактной единицей измерения, используется для изображений и других элементов содержания на веб-странице. Пиксели в CSS являются аппаратнонезависимыми. Они сами корректируются в соответствии с плотностью пикселей на дисплее устройства. Подробно об этом Вы можете узнать на странице «Переменная плотность пикселей», подробности о пикселе как единице измерения в CSS, читайте на странице «Единицы измерения».

Предположим у нас есть следующий фрагмент кода:

<div style="width:150px; height:200px"> </div>

На обычном дисплее, блок HTML будет отображаться с размерами 150px на 200px, а на дисплее Retina этот блок будет отображаться с размерами 300px на 400px, т.е. в два раза больше, при этом сохраняя тот же физический размер, вот это и есть: Двойная плотность пикселей.

Плотность пикселей Retina
Плотность пикселей дисплея Retina
к меню ↑

Изменить размер изображений для Ретина

Предположим что у нас есть изображение 200px на 400px (пиксель CSS ), и нам нужно правильно отобразить это изображение на дисплее Retina. Мы можем использовать альтернативное изображение, специально для устройства Retina с размером 400px на 800px.

Фрагмент кода CSS для обычного дисплея и с высоким разрешением.

/* для обычного дисплея */
.image {
    background-image: url(lowreslogo.png);
    background-size: 200px 300px;
    height: 300px;
    width: 200px;
}
/* для дисплей высокого разрешения */
@media only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
.image {
    background: url(highreslogo.png) no-repeat;
    background-size: 400px 800px;
/* ... */
}
}
к меню ↑

Заменить изображения веб-иконками

Если на странице сайта большое количество маленьких изображений (иконок), менять размер для каждой иконки не нужно. Для этого проще использовать свойство CSS @font-faces, веб-иконки автоматически изменяют свой размер для устройств с высокой плотности пикселей, так же как это делают обычные шрифты. Использование @font-faces является альтернативным решением, подробности на странице «Применить иконки».

Использовать @font-faces для замены изображений иконками.

HTML

<span class="myicon">d</span>

CSS

/* Сначала импортируем Font */
@font-family: myFont;
src: url('Modern_Icons.ttf'),
     url('Modern_Icons.eot'); /* IE9 */
.myicon {
    font-family: ‘Modern Icons’;
}
к меню ↑

SVG вместо растровых изображений

Растровое изображение хорошо выглядит на дисплеях Retina. Но если растровое изображение увеличить во много раз, на экране мы увидим разноцветные пиксели, с SVG таких проблем нет. У SVG есть еще одно преимущество, изображение SVG отображается на странице быстрее чем растровое изображение потому что SVG меньше весит. Лучший способ сделать SVG иконки спрайтом, применить тег <symbol>.

HTML

<img width="150" src="example.svg" height="200"/>

CSS

.image {
    background-image: url(example.svg);
    background-size: 150px 200px;
    height: 150px;
    width: 200px;
}
к меню ↑

JavaScript для дисплея Ретина

Как уже упоминалось, заменив изображение на изображение в два раза больше специально для дисплея Retina веб-сайт будет загружаться медленнее. Но если Вы выбрали именно этот способ для совместимости с дисплеем Retina, вам поможет JavaScript. Чтобы не писать свойства CSS для каждого изображения индивидуально как показано в первом примере используйте JavaScript.

В этом коде показано как это сделать.

$(document).ready(function(){
if (window.devicePixelRatio > 1) {
var lowresImages = $('img');

images.each(function(i) {
var lowres = $(this).attr('src');
var highres = lowres.replace(".", "@2x.");
$(this).attr('src', highres);
});
}
});

Здесь всё просто, изображение с низким разрешением myimage.png, а изображения с высоким разрешением myimage@2x.png.

Недостатком использования этого способа является то, что устройство с дисплеем Retina будет загружать обе версии изображения каждый раз при загрузке страницы, но отображать с высоким разрешением. Это несомненно влияет на скорость отображения веб-сайта.

В настоящее время лучшим способом быстрой загрузки изображений является векторный метод SVG. Для иконок лучше использовать метод @font-faces.

к меню ↑

Тег picture для дисплея Ретина

Элемент HTML5 picture использует дескрипторы 1x, 1, 5x, 2x, 3x для дисплеев с высоким разрешением.

<picture>
  <source media="(min-width: 650px)"
     srcset="img.png,
             img@1.5x.png 1.5x,
             img@2x.png 2x,
             img@3x.png 3x">
  <source media="(min-width: 465px)"
          srcset="img.png,
                  img@1.5x.png 1.5x,
                  img@2x.png 2x,
                  img@3x.png 3x">
  <img src="img.png"
       srcset="img@1.5x.png 1.5x,
               img@2x.png 2x,
               img@2x.png 3x",
       alt="">
</picture>
к меню ↑

Фавикон для дисплея Ретина

Сегодня иконки используются для различных целей, как для стандартных устройств, так и для дисплеев Retina. Фавикон используется в качестве закладок на главном экране устройств Apple. Поэтому они должны быть более высокого качества. Вы можете экспортировать версию 16px и 32px, чтобы сделать иконку Favicons совместимую к дисплею Retina.

к меню ↑

Заключение

Многие веб-сайты и приложения требуют резервные копии для лучшего отображения содержания на мобильных устройствах. Приведённые решения для дисплея Retina является эффективным подходом, чтобы посетители сайта были довольны отображением содержания.

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