Какие знаешь особенности при разработке под Retina дисплей

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

Первое и главное — картинки, блядь. Тут всё просто, как три копейки. Если у тебя на обычном экране лого 100 на 100 пикселей, то для этих навороченных дисплеев, где пикселей овердохуища, тебе надо заготовить такие же картинки, но в два или три раза больше. То есть 200 на 200 (это 2x) и 300 на 300 (это 3x). А в CSS ты указываешь, что они должны влезать обратно в свои 100 пикселей. Вот смотри, как это выглядит:

.logo {
  background-image: url('logo@2x.png');
  background-size: 100px 100px; /* Указываем исходный размер */
}

Второй момент — забудь про жёсткие пиксели в стилях, как страшный сон. Используй em, rem или проценты. Пусть всё плывёт и масштабируется, как надо, а не торчит колом на экране, как хуй с горы.

Третий лайфхак — если можно вставить SVG, вставляй SVG. Это вектор, ёпта! Его можно растягивать на весь экран, и он не превратится в мыльную кашу, в отличие от твоих жалких JPEG'ов.

Четвёртое — медиа-запросы, эти хитрожопые штуки. Через них можно ловить именно ретина-дисплеи и подсовывать им особые стили. Пишешь примерно так:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Стили для Retina */
}

И последнее, но не по важности — Canvas. Вот тут, блядь, самый подводный камень. Если ты рисуешь что-то на <canvas>, а потом смотришь на Retina-экране, и всё размытое, как будто ты в запое — значит, ты забыл про devicePixelRatio. Этот коэффициент надо учесть при отрисовке, иначе будет пиздец, а не графика. Запомни это, как «Отче наш»!

Вот и вся наука. Не так страшен чёрт, как его малюют. Главное — не тупить и готовить контент с запасом.