Уменьшают ли устройства с экранами Retina размер элементов?
Где-то я читаю, что на ретина-экранах изображения не меняют своего физического размера (не уменьшаются/не увеличиваются), а просто могут отображаться более мутными. То есть... 50рх что на ретине, что на обычном экране будут 50. Меняется только качество отображаемого. Например.
В качестве примера рассмотрим письмо компании Litmus. В хедере емейла находится логотип размером 130×48 px. Изображение выглядит размыто для подписчиков, которые открывают его на устройстве с Retina-дисплеем. Источник
Где-то я читаю, что наоборот, ретина-устройства все-таки уменьшают элементы (2x - в два раза, 3x - в три и т.д.). То есть 50рх на ретине - это 100рх на обычном экране... Например:
...имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение - 640x960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Источник
Чем больше статей читаю на эту тему, тем только больше и больше запутываюсь)
Ответы (2 шт):
Всё очень просто – на дисплеях с высоким разрешением есть коэффициент масштабирования (scale factor). К примеру, на смартфоне с дисплеем с реальным разрешением 1440x2560 изображение может масштабироваться до 675x1200. Коэффициент масштабирования зависит от конкретной модели устройства и настроек пользователя.
Вам, как разработчику, нужно помнить о медиа-запросах (@media), чтобы завязывать стили на конкретное разрешение экрана. При этом @media «видят» именно масштабируемое разрешение, а не реальное.
На 13-дюймовом MacBook Pro, например, реальное разрешение экрана составляет 2560x1600 пикселей. Но в настройках пользователь волен указывать, какое разрешение он хочет видет на этом дисплее. У меня стоит 1280x800, так как «картинка» разрешением 2560x1600 точек на 13-дюймах будет отображаться слишком мелко.
Само же понятие Retina – это не более, чем маркетинговое название Apple дисплеев с высокой плотностью пикселей.
Реальный размер отображаемого зависит от плотности пикселей на устройстве.
В одном дюйме всегда 96px, но всегда ли дюйм размером ровно в 2.5cm? Нет, чем больше плотность пикселей на устройстве, тем больше дюйм, и чем меньше плотность пикселей на устройстве, тем меньше дюйм (в сантиметрах, но не в пикселях).
Например, на устройстве, где плотность пикселей - 96dpi, и pixel-ratio равно 1, 1 эталонный дюйм (2.5 сантиметров) будет равен 1 дюйму. И например, какая-то деталька на сайте в 96px, будет отображаться в 2.5cm.
А вот на устройстве, где плотность пикселей больше, эта же деталь может отобразиться в 1.7cm, 1cm и т.д.
Похоже на физические пиксели? Да, НО это не говорит нам о том, что те размеры, которые мы задаём в CSS, задаются физическими пикселями. Мы это можем увидеть на следующем примере. У нас есть устройство с разрешением экрана - 982х2127px (физические пиксели), размером экрана - 393х851(логические пиксели). Зададим ширину элемента для этого устройства 393px(размер экрана в логических пикселях) и посмотрим что получится.
Нет никакой полосы прокрутки. Следовательно, когда мы задаем размеры наших элементов через пиксели, мы обращаемся к логическим пикселям (они же CSS пиксели).
Какие выводы?
- даже логические пиксели могут по-разному отображаться на разных устройствах с разной плотностью пикселей. Это нужно учитывать (на устройстве с большей плотностью пикселей все содержимое сайта будет меньше, на устройстве с меньшей плотностью - больше).
- по этой причине следует минимизировать использование px (особенно для адаптива).