Как менять изображения на retina экранах?

Question

[massef]

Есть социальные иконки, хотел для retina дисплеев сделать их четче.
Сделал второе изображение x2. было 30x20 стало 60x40
В медиа запросе пишу:

@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) { 

	.icon {
		&--yt {
			background: url('../img/yt-x2.png');
		}
	}
}

Переключаюсь в хроме на инструмент просмотра на различных устройствах, выбираю например iphone 6.
Но иконка просто увеличивается в два раза, почему так происходит?
Параметр device-pixel-ratio не трогал, стоит 2, если выставить 1, то возвращается дефолтная иконка, т.е. медиа запросы работают.

Как правильно все это готовить?

Answer 1

[Денис Инешин]

Поймите следующее, если вы просто подмените картинку, то эффект будет как у вас, увеличение в 2 раза.
Ваша же задача сделать так, чтобы ваша х2 картинка, занимала визуально ровно ту же область что и раньше.
Этого эффекта очень легко добиться для тегов IMG просто прописав ширину, например width: 100px; и всё, ретина картинка встанет как надо.

Для фоновых же изображений, все не так просто, нужно использовать background-size
В вашем случае нужно написать что-то вроде:

&--yt {
      background: url('../img/yt-x2.png');
      background-size: 50% 50%;
    }

Answer 2

[Андрей Хохлов]

Background-size нужно указать по размеру первой иконки

Comments

[massef]

Спасибо. Правда уже сам догадался что нужно size поставить )

Answer 3

[Иван]

Не знаю как в вашем случае, но лично я сталкивался, что не всегда отладчик Хрома правильно прикидывается телефоном/таблеткой. Нормально работает только разрешение, если подключается какой-то JS или CSS, то сходство поведения не гарантировано. Проверяйте на оригинале / используйте эмулятор / положите на это половой орган (любой, по вкусу).

Comments

[massef]

Положить можно =). Но я хотел просто потренироваться, никогда раньше не работал с retina экранами.