Разбираясь в единицах CSS, я столкнулся с определением контрольного пикселя. Однако я не смог найти последовательного и исчерпывающего описания его связи с единицей пикселей CSS. Я провел некоторое исследование по этому вопросу, но мне все еще немного неясно.

1. Собранная информация1.1 Определение пикселей

Существует два различных типа / определения пикселя:

«Пиксель устройства» - единственная физическая точка на дисплее.

А также:

CSS-пиксель- единица, наиболее близко соответствующая эталонному пикселю. [1]

Две параллельные концепции под одним и тем же именем определенно не проясняют путаницу. Я полностью понимаю цель введения второго, но я считаю, что его номенклатура вводит в заблуждение. Пиксель CSS классифицируется как абсолютная единица и:

«Абсолютные единицы длины фиксированы по отношению друг к другу». [1]

Вышеприведенное утверждение кажется довольно очевидным для каждой единицы, кроме пикселя. Следуя спецификации w3c:

«Для CSS устройства, эти размеры являются либо якорь (я), связывая физических единиц их физических измерений, или (II), связывая блок пикселя опорного пикселя.

(...) Обратите внимание, что если якорная единица представляет собой пиксельную единицу, физические единицы могут не соответствовать их физическим измерениям. В качестве альтернативы, если якорная единица является физической единицей, единица пикселей может не отображаться на все количество пикселей устройства. "[1]

С учетом вышеупомянутой цитаты я полагаю, что абсолютные единицы не все, что абсолютные, так как они могут быть прикреплены к опорному пикселю.

1.2 Опорный пиксель

Опорный пиксель сам по себе является угловым измерением [2]:

«Эталонный пиксель - это угол обзора одного пикселя на устройстве с плотностью пикселей 96 точек на дюйм и расстоянием от считывающего устройства до длины руки. Для номинальной длины руки 28 дюймов угол обзора, таким образом, составляет около 0,0213 градусов». [1]

Что изображено на рисунке ниже:

Несмотря на то, что опорный пиксель определяется как угол обзора, мы можем читать далее:

«Для чтения на расстоянии вытянутой руки,1 пиксель соответствует 0,26 мм (1/96 дюйма)«.

Оставляя в стороне несоответствия, мы можем установить значение угла:

α = 2 * arctan(0.026/142) = 0.02098°

where:
    α — a value of the visual angle

Таким образом, размер отображаемой единицы равен:

y = 2x * tan(0.01049°)

where:
    y — a displayed unit size
    x — a reading distance

Учитывая приведенную выше формулу, чтобы рассчитать размер единицы, нам нужно определить, каково реальное расстояние считывания. Поскольку он может варьироваться среди пользователей, его категоризация была основана на DPI устройства.

1.2.1 DPI

Для удобства предположим, чтоDPI == PPI.

Это измерение позволяет нам угадать тип дисплея. Быстрая проверка:

Айфон 6 (4,7"1334 × 750):326 точек на дюйм;Sony Bravia 4K (54,6", 3840 × 2160):75 ppi.

Таким образом, в целом, чем больше PPI, тем ближе к экрану сидит пользователь. Таблица ниже [3] представлены рекомендации по расстоянию считывания для устройств с определенным DPI:

               ———————————————————————————————————————
              |  DPI  | Pixel size | Reading distance |      
 —————————————————————————————————————————————————————
|PC's CRT     |  96   | ~0.2646 mm |     ~71 cm       |     
|display      |       |            |                  |
 —————————————————————————————————————————————————————
|Laptop's LCD |  125  | 0.2032 mm  |     ~55 cm       |
|display      |       |            |                  |
 —————————————————————————————————————————————————————
|Tablet       |  160  | ~0.159 mm  |     ~43 cm       |
 —————————————————————————————————————————————————————

Однако мне неясно, как эти значения расстояния были получены. Отношение к DPI описывается с помощью функции или это просто эмпирическое наблюдение?

1.2.2 Соотношение пикселей устройства

Введение дисплея Retina еще более усложнило ситуацию. Его PPI, как правило, примерно в 2 раза больше, чем у других пациентов, а рекомендуемая дистанция чтения должна оставаться неизменной. Поскольку размер пикселя CSS не обязательно соответствует размеру пикселя устройства, я предполагаю, что размер единицы на дисплее Retina сначала переводится в опорный пиксельразмер (выражается в пикселях устройства), а затем умножается на соотношение пикселей. Это правильно?

1.2.3 Масштабирование

В то время как масштабирование, отображаемого размер опорного пикселя растет [4], поэтому расстояние от дисплея увеличивается. Это довольно нелогично, потому что это означает, что мы «отходим» от экрана, не приближаясь к нему.

2. Вопросы

Завершая мои сомнения и формулируя вопросы:

Как рассчитывается размер CSS-пикселя, когда якорная единица является физической единицей?Как установить формулу для отношения между DPI и расстоянием считывания?Как рассчитывается размер пикселя CSS для нестандартных устройств с высоким DPI / PPI, таких как принтеры и дисплеи Retina?

Также, пожалуйста, исправьте меня, если мои рассуждения неверны или я что-то упустил. Спасибо за ответы.

3. СсылкиW3C спецификацияinamidst.com, сайт Шона Б. ПалмераМоззилла Хакс1uirksmode.org