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 (особенно для адаптива).

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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