1

Где-то я читаю, что на ретина-экранах изображения не меняют своего физического размера (не уменьшаются/не увеличиваются), а просто могут отображаться более мутными. То есть... 50рх что на ретине, что на обычном экране будут 50. Меняется только качество отображаемого. Например.

В качестве примера рассмотрим письмо компании Litmus. В хедере емейла находится логотип размером 130×48 px. Изображение выглядит размыто для подписчиков, которые открывают его на устройстве с Retina-дисплеем. Источник

Где-то я читаю, что наоборот, ретина-устройства все-таки уменьшают элементы (2x - в два раза, 3x - в три и т.д.). То есть 50рх на ретине - это 100рх на обычном экране... Например:

...имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение - 640x960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Источник

Чем больше статей читаю на эту тему, тем только больше и больше запутываюсь)

4
  • В чем Ваш вопрос? Если коротко: допустим, у вас есть изображение 100x100 пикс. На устройствах с масштабным коэффициеном (scale factor) равным 2 — чтобы изображение выглядело корректно (неразмыто) — Вам нужно добыть это изображение в большем разрешении — 200x200 пикс. и отображать в границах 100x100 пикс. Так и для scale factor 3x, соотв. умножать на 3.
    – Igor R.
    15 окт 2020 в 13:41
  • @Igor R. Вопрос был в другом: на что влияют ретина экраны? - на качество отображаемого или на физические размеры. До этого мне всегда казалось, что только на качество (например, визуально размер 100рх что на ретине, что на обычном экране будет один и тот же), но во второй статье говорится о влиянии на размеры (шрифт 16рх станет шрифтом 8рх на экране с 2х). Это я имею в виду
    – Eva
    15 окт 2020 в 13:52
  • 1
    "шрифт 16рх станет шрифтом 8рх на экране с 2х" — Нет, это не так. Допустим, шрифт 12px на веб-странице будет выглядеть на дисплее Retina также, как и не на дисплее Retina. Просто на дисплее Retina этот шрифт будет использовать большее кол-во изначальных px для рендера этого шрифта. Retina дисплеи используют виртуальные пиксели (virtual pixels).
    – Igor R.
    15 окт 2020 в 14:04
  • @Eva наверное, тут больше про canvas, про то, когда мы руками отрисовываем пиксели, внизу статьи сказано про это webglfundamentals.org/webgl/lessons/ru/… 15 окт 2020 в 15:21

2 ответа 2

1

Всё очень просто – на дисплеях с высоким разрешением есть коэффициент масштабирования (scale factor). К примеру, на смартфоне с дисплеем с реальным разрешением 1440x2560 изображение может масштабироваться до 675x1200. Коэффициент масштабирования зависит от конкретной модели устройства и настроек пользователя.

Вам, как разработчику, нужно помнить о медиа-запросах (@media), чтобы завязывать стили на конкретное разрешение экрана. При этом @media «видят» именно масштабируемое разрешение, а не реальное.

введите сюда описание изображения

На 13-дюймовом MacBook Pro, например, реальное разрешение экрана составляет 2560x1600 пикселей. Но в настройках пользователь волен указывать, какое разрешение он хочет видет на этом дисплее. У меня стоит 1280x800, так как «картинка» разрешением 2560x1600 точек на 13-дюймах будет отображаться слишком мелко.

Само же понятие Retina – это не более, чем маркетинговое название Apple дисплеев с высокой плотностью пикселей.

0

Реальный размер отображаемого зависит от плотности пикселей на устройстве.

В одном дюйме всегда 96px, но всегда ли дюйм размером ровно в 2.5cm? Нет, чем больше плотность пикселей на устройстве, тем больше дюйм, и чем меньше плотность пикселей на устройстве, тем меньше дюйм (в сантиметрах, но не в пикселях).

Например, на устройстве, где плотность пикселей - 96dpi, и pixel-ratio равно 1, 1 эталонный дюйм (2.5 сантиметров) будет равен 1 дюйму. И например, какая-то деталька на сайте в 96px, будет отображаться в 2.5cm.

А вот на устройстве, где плотность пикселей больше, эта же деталь может отобразиться в 1.7cm, 1cm и т.д.

Похоже на физические пиксели? Да, НО это не говорит нам о том, что те размеры, которые мы задаём в CSS, задаются физическими пикселями. Мы это можем увидеть на следующем примере. У нас есть устройство с разрешением экрана - 982х2127px (физические пиксели), размером экрана - 393х851(логические пиксели). Зададим ширину элемента для этого устройства 393px(размер экрана в логических пикселях) и посмотрим что получится.

введите сюда описание изображения

Нет никакой полосы прокрутки. Следовательно, когда мы задаем размеры наших элементов через пиксели, мы обращаемся к логическим пикселям (они же CSS пиксели).

Какие выводы?

  1. даже логические пиксели могут по-разному отображаться на разных устройствах с разной плотностью пикселей. Это нужно учитывать (на устройстве с большей плотностью пикселей все содержимое сайта будет меньше, на устройстве с меньшей плотностью - больше).
  2. по этой причине следует минимизировать использование px (особенно для адаптива).

Больше информации

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.