Достаточно часто возникает задача учесть ретину при разработке своего проекта.
Самый простой способ - это сделать все иконки на сайте в SVG и сбилдить из них шрфит. Например, через сервис icomoon.io
Для картинок в background-image необходимо добавить в CSS правила:
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background: url('путь картинки в 2x размере') 0 0 / 100px 100px no-repeat;
}
В данном коде 0 0 - это позиционирование, если нужно по центру ставим 50% 50%. 100px 100px - это размер оригинальной 1x картинки, до которой сожмется 2x, чтобы стать в 2 раза плотней.
Если картинка у Вас в теге img, то тут остается способ заменять ее с помощью Javascript.
Определяем ретину с помощью javascript во входной точке приложения и отправляем результат в глобальную переменную.
function isRetinaDisplay() {
if (window.matchMedia) {
var mq = window.matchMedia("only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)");
return (mq && mq.matches || (window.devicePixelRatio > 1));
}
}
window.isRetina = {
'retina': isRetinaDisplay()
};
if (window.isRetina) {
// тут меняем картинки на 2x
}