Как вычисляется размер пикселя CSS?

В то время как углубляясь в CSS единиц я столкнулся определение опорного пикселя. Однако я не смог найти последовательное и всестороннее описание его отношения к элементу пикселя CSS. Я провел некоторое исследование по этому вопросу, но это все еще немного неясно для меня.

1. Собранная информация


1.1 Определение пикселя

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

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

и

CSS-пиксельного - блок наиболее близко соответствующий опорный пиксель. [1]

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

"Единицы абсолютной длины фиксированы относительно друг друга". [1]

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

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

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

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


1.2 Референтный пиксель

Самым опорным пикселем является измерение angular [2]:

"Опорный пиксель представляет собой угол зрения одного пикселя на устройстве с плотностью пикселей 96dpi и расстоянием от считывателя длины руки. Для номинальной длины руки 28 дюймов угол зрения составляет, таким образом, около 0,0213 градусы". [1]

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

enter image description here

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

"Для чтения на длине руки 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
46
09 дек. '14 в 18:14
источник поделиться
1 ответ

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

На основе эта статья:

Единица px является волшебной единицей CSS. Это не связано с текущим шрифт, а также не относится к абсолютным единицам. Единица px равна определяется как небольшая, но видимая, и такая, что горизонтальная ширина 1px линия может отображаться с острыми краями (без сглаживания). Что резкое, маленькое и видимое зависит от устройства и способа его использования: держите его близко к своим глазам, как мобильный телефон, на руках как монитор компьютера, или где-то посередине, как книга? Таким образом, px не определяется как постоянная длина, а как нечто, что зависит от типа устройства и его типичного использования.

ОБНОВЛЕНИЕ: Я ошибся. Возможно, что в настоящее время это просто не реализовано ни в одном браузере. В тех случаях, когда это действительно так, согласно спецификации: , эти измерения либо привязаны (i), связывая физические единицы с их физическими измерениями, что означает, что 1px будет равно 1/96 физический дюйм.

Что касается отношения между DPI и расстоянием чтения в таблице, то это означает, что если DPI = 96, тогда расстояние чтения составляет ~ 71 см или 28 дюймов, и эти значения обратно пропорциональны, что означает, что более высокий DPI приведет к меньшее расстояние чтения.

Из этого легко придумать формулу:

x = 125/96

y = 71/x

where:
  x - ratio between second and first DPI value
  y - reading distance for second DPI value

Для устройств с более высоким разрешением приведен пример ниже в статье Mozilla Hacks:

Давайте рассмотрим iPhone 4 как самый известный пример. Он поставляется с 326 Дисплей DPI. Согласно нашей таблице выше, как смартфон, его типичное расстояние просмотра составляет 16,8 дюйма, а его базовый пиксель плотность составляет 160 DPI. Чтобы создать один пиксель CSS, Apple решила установить отношение пикселя устройства к 2, что фактически делает отображение Safari iOS веб-страниц так же, как на телефоне с 163 DPI.

Итак, это означает, что у нас есть два разрешения - физический (PPI) и CSS один (cssppi). Кажется, что cssppi используется для расчета размера опорного пикселя, а затем производители устройств выбрать, сколько ссылки пикселей они будут отображаться на одном CSS пикселя (я предполагаю, что это число равно значению отношения устройства пикселя, но не 100% уверен).

Здесь таблица со сравнением для некоторых общих соотношений пикселей, PPI и cssppi: http://mydevice.io/devices/

Для получения дополнительной информации и справки проверьте следующие статьи:

6
11 дек. '14 в 16:02
источник

Посмотрите другие вопросы по меткам или Задайте вопрос