Как подружить retina дисплей и CSS Media Queries?

Всем привет. Есть сайт, на котором есть некоторое количество медиа-запросов, отталкивающихся от ширины окна браузера (min-width / max-width).

Проблема: при просмотре на Макбуке с ретиной и разрешением 2560 x 1600 применяются стили для width == 1280 (то есть половина). $(window).width() возвращает эту же ширину. Я читал про devicePixelRatio и особенности ретины, но до конца не разобрался с темой.

Есть ли возможность как-то задать, чтобы сайт просматривался с реальным разрешением экрана (2560 или хотя бы 1920), то есть срабатывали медиа-запросы для бОльшего разрешения.
Ссылку на сайт привести не могу, но думаю и так понятно, в чём проблема.
  • Вопрос задан
  • 4869 просмотров
Решения вопроса 1
Serj-One
@Serj-One
i'm sexy and i know it
Вы читали, что такое retina?
В Retina-экранах плотность пикселей в 4 раза больше, чем в обычных. Соответственно 2560-retina px = 1280 css px.
Проще говоря, элемент, который на обычном мониторе занимает 1 физический px, на retina будет занимать 4px. Т.е. 2px по горизонтали и 2px по вертикали. Но в пересчёте на css px это будет тот же 1px.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы