5 способов поддержки дисплеев Retina высокой плотности

Интересный вопрос был затронут Бренданом Дэвисом в моем недавнем посте «Адаптивный веб-дизайн и полосы прокрутки: лучше ли реализация Chrome?» : Влияют ли точки прерывания RWD на экраны с высокой плотностью пикселей?

Короткий ответ: нет — но нам нужно немного глубже вникнуть и посмотреть на проблемы, которые они могут вызвать.

Что такое сетчатка?

«Retina» — это торговая марка Apple для экранов двойной плотности, но другие производители создают аналогичные дисплеи. Эта технология используется в последних iPhone, iPad, MacBook Pro и других высококлассных устройствах.

Например, MacBook Pro 15 ″ имеет разрешение 2880 × 1800 или 220 пикселей на дюйм. При таком масштабе большинство людей не могут заметить отдельные пиксели на типичных расстояниях просмотра — приложения и веб-сайты будут слишком малы для использования.

Следовательно, устройство возвращается к стандартному разрешению 1440 × 900, но дополнительные пиксели могут использоваться, чтобы шрифты и графика выглядели более плавными.

В чем проблема?

Растровые изображения стандартного разрешения могут выглядеть блочно на дисплее Retina. Фотография размером 400 x 300 масштабируется до 800 x 600 пикселей, но дополнительных подробностей нет. Это может быть заметно по сравнению с гладкими шрифтами и другими изображениями с высоким разрешением.

Использование в реальном мире

Если вы посмотрите в Интернете, вы будете прощены за мысли, что у всех есть дисплей Retina. В настоящее время он доступен только в устройствах высокого класса, но разработчики желают его, так что это ведет к непропорциональным объемам онлайн-дискуссий. В реальном мире процент людей, использующих аналогичные дисплеи, представлен низкими цифрами.

Давайте рассмотрим это следующим образом: если вы не разрабатываете для 1% пользователей IE6 / 7, вам, вероятно, не стоит слишком беспокоиться о людях, использующих Rentina, тем более что они все еще могут просматривать ваш сайт.

Тем не менее, Retina-подобные экраны в конечном итоге перейдут на все устройства. Сейчас мало причин для беспокойства, но нет никакого вреда в каком-то перспективном планировании. Давайте посмотрим на варианты в порядке рекомендации …

1. Используйте SVG и CSS3 эффекты

Подсказка в названии, но масштабируемая векторная графика … масштабируема! Неважно, насколько большим будет SVG — он всегда будет плавным, потому что он определяется с использованием векторов (линий и форм), а не отдельных пикселей.

SVG не практичен для фотографий, но идеален для логотипов, диаграмм и диаграмм. Основным недостатком является отсутствие поддержки в IE8 и ниже, но вы всегда можете предоставить запасной вариант PNG или использовать прокладку, такую ​​как Raphaël или svgweb . Смотрите также: Как добавить масштабируемую векторную графику на вашу веб-страницу .

Вы также можете заменить некоторые изображения полностью. Например, заголовки, градиенты, углы или тени, определенные как графика, могут быть воспроизведены с использованием только CSS3. Они будут рендериться с лучшим качеством, уменьшать количество HTTP-запросов и использовать меньшую пропускную способность.

2. Используйте иконки веб-шрифтов

Чем больше я использую значки веб-шрифтов , тем больше я их люблю. Как и SVG, шрифты являются векторами, поэтому они масштабируются, поэтому вы можете использовать наборы шрифтов, которые содержат значки. Они идеально подходят для небольших, часто используемых фигур, таких как почтовые конверты, телефоны, элементы управления виджетами и логотипы социальных сетей. Они также работают в любом браузере, включая IE6 +.

Существует множество коммерческих и бесплатных наборов иконок:

#myimage {
	width: 400px;
	height: 300px;
	background: url(lo-res.jpg) 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
	#myimage {
		background-image: url(hi-res.jpg);
	}
}

 var isRetina = (
	window.devicePixelRatio > 1 ||
	(window.matchMedia && window.matchMedia("(-webkit-min-device-pixel-ratio: 1.5),(-moz-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)").matches)
);