В то время как углубляясь в CSS единиц я столкнулся определение опорного пикселя. Однако я не смог найти последовательное и всестороннее описание его отношения к элементу пикселя CSS. Я провел некоторое исследование по этому вопросу, но это все еще немного неясно для меня.
1. Собранная информация
1.1 Определение пикселя
Существует два разных типа/определений пикселя:
"пиксель устройства" - одна физическая точка на дисплее.
и
CSS-пиксельного - блок наиболее близко соответствующий опорный пиксель. [1]
Две параллельные концепции под тем же именем определенно не уточняют путаницу. Я полностью понимаю цель введения второго, но я считаю, что его номенклатура вводит в заблуждение. CSS-пиксель классифицируется как абсолютная единица и:
"Единицы абсолютной длины фиксированы относительно друг друга". [1]
Вышеприведенное утверждение кажется довольно очевидным для каждой единицы, за исключением пикселя. Следуя спецификации w3c:
"Для устройства CSS эти измерения либо привязаны (i), связывая физические единицы с их физическими измерениями, либо (ii) связывая пиксельный блок с опорным пикселем.
(...) Обратите внимание, что если опорный блок является пиксельным блоком, физические единицы могут не соответствовать их физическим измерениям. Альтернативно, если якорный блок является физическим устройством, пиксельный блок может не отображаться на целый ряд пикселов устройства." [1]
Учитывая вышеупомянутую цитату, я предполагаю, что абсолютные единицы не все настолько абсолютные, поскольку они могут быть привязаны к эталонному пикселю.
1.2 Референтный пиксель
Самым опорным пикселем является измерение angular [2]:
"Опорный пиксель представляет собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Для номинальной длины руки 28 дюймов угол зрения составляет, таким образом, около 0,0213 градусы". [1]
Что изображено на изображении ниже:
Несмотря на определение опорного пикселя, как угол зрения, мы можем далее следующим образом:
"Для чтения на длине руки 1px соответствует примерно 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.
Это измерение позволяет угадать тип отображения. Быстрая проверка:
- IPhone 6 ( 4.7 ", 1334 × 750): 326 ppi;
- Sony Bravia 4K ( 54,6 ", 3840 × 2160): 75 ppi.
Итак, в целом, чем больше PPI, тем ближе к экрану пользователь сидит. В таблице ниже [3] представлены рекомендации относительно расстояния чтения для устройств с определенным DPI:
———————————————————————————————————————
| DPI | Pixel size | Reading distance |
—————————————————————————————————————————————————————
|PC CRT | 96 | ~0.2646 mm | ~71 cm |
|display | | | |
—————————————————————————————————————————————————————
|Laptop LCD | 125 | 0.2032 mm | ~55 cm |
|display | | | |
—————————————————————————————————————————————————————
|Tablet | 160 | ~0.159 mm | ~43 cm |
—————————————————————————————————————————————————————
Однако мне непонятно, как были получены эти значения расстояния. Является ли отношение к DPI описываемым функцией или это просто эмпирическое наблюдение?
1.2.2 Соотношение пикселей устройства
Введение дисплея Retina еще больше осложнило этот вопрос. Его ИЦП, как правило, примерно в 2 раза больше, чем не Retina, в то время как рекомендуемое расстояние чтения должно оставаться неизменным. Поскольку размер пикселя CSS не обязательно соответствует размеру пикселя устройства, я предполагаю, что размер блока на дисплее Retina сначала преобразуется в опорный пиксель размер (выраженный в пикселях устройства), а затем умножается по отношению к пикселям. Правильно ли это?
1.2.3 Масштабирование
В то время как масштабирование, отображаемый размер опорный пиксель растет [4], эрго на расстоянии от дисплея растет. Это довольно противоречиво, потому что это означает, что мы "отступаем" от экрана, не приближаясь к нему.
2. Вопросы
Завершая мои сомнения и формулируя вопросы:
- Как вычисляется размер пикселя CSS, когда блок привязки является физической единицей?
- Как установить формулу для отношения между DPI и расстоянием чтения?
- Как вычисляется размер пикселя CSS для нестандартных устройств с высоким разрешением DPI/PPI, таких как принтеры и дисплеи Retina?
Также, пожалуйста, поправьте меня, если мои аргументы недействительны или я что-то упустил. Спасибо за ответы.
3. Ссылки
- Спецификация W3C
- inamidst.com, сайт Шона Б. Палмера
- Mozzilla Hacks
- 1uirksmode.org