Всем привет. Есть сайт, на котором есть некоторое количество медиа-запросов, отталкивающихся от ширины окна браузера (min-width / max-width).
Проблема: при просмотре на Макбуке с ретиной и разрешением 2560 x 1600 применяются стили для width == 1280 (то есть половина). $(window).width() возвращает эту же ширину. Я читал про devicePixelRatio и особенности ретины, но до конца не разобрался с темой.
Есть ли возможность как-то задать, чтобы сайт просматривался с реальным разрешением экрана (2560 или хотя бы 1920), то есть срабатывали медиа-запросы для бОльшего разрешения.
Ссылку на сайт привести не могу, но думаю и так понятно, в чём проблема.
Вы читали, что такое retina?
В Retina-экранах плотность пикселей в 4 раза больше, чем в обычных. Соответственно 2560-retina px = 1280 css px.
Проще говоря, элемент, который на обычном мониторе занимает 1 физический px, на retina будет занимать 4px. Т.е. 2px по горизонтали и 2px по вертикали. Но в пересчёте на css px это будет тот же 1px.
Читал. Это я понял.
А в чём тогда преимущество, если я не могу посмотреть сайт на нормальном разрешении?
Ещё раз - можно ли сделать, чтобы браузер отображал с плотностью == 1 (с width == 2560).
v_decadence: Преимущество в качестве графики. Там, где обычный монитор отображает 1px, retina отображает 4px. Т.е. в блок 100x100 css px можно положить изображение 200x200px, и если на обычном мониторе изображение сожмётся до 100x100, на retina оно отобразится в своём исходном качестве 200x200, при этом оставаясь внутри контейнера 100x100 css px. На css пиксели retina никак не влияет. Для вёрстки делите разрешение retina на 2. Соответственно верстайте сайт стандартной ширины.
domrachew Спасибо за объяснение.
Дело в том, что сайт отзывчивый, то есть перестраивается в зависимости от ширины окна браузера и тянется на всю ширину от края до края.
По незнанию ожидания были таковы, что ретина будет отображать, будто ширина окна 2560. Значит, это нормальное поведение и ничего с этим не сделать.
v_decadence: А с этим и не нужно ничего делать. Представляете, какими маленькими были бы большинство сайтов на ретине, если б дела обстояли так, как вы подумали? Retina дисплеи созданы исключительно для улучшения качества отображения.
Простой
