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

При разработке под Retina дисплеи важно учитывать их высокую плотность пикселей (2x, 3x). Основные моменты:

1. Изображения: Используйте изображения в 2x или 3x размере, чтобы они выглядели четко. Например, для 100x100px подготовьте 200x200px (2x) и 300x300px (3x).

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

2. CSS: Используйте относительные единицы (em, rem, %) вместо фиксированных пикселей, чтобы элементы масштабировались корректно.

3. SVG: Векторная графика (SVG) идеально подходит, так как масштабируется без потери качества.

4. Медиа-запросы: Можно использовать -webkit-min-device-pixel-ratio для специфичных стилей:

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

5. Canvas: Для <canvas> учитывайте devicePixelRatio при отрисовке, иначе графика будет размытой.