Ao investigar as unidades CSS, encontrei uma definição do pixel de referência. No entanto, não consegui encontrar uma descrição consistente e abrangente de sua relação com a unidade de pixels CSS. Eu fiz algumas pesquisas sobre esse assunto, mas ainda é um pouco claro para mim.

1. Informações coletadas1.1 Uma definição de pixel

Existem dois tipos / definições distintos de um pixel:

"Pixel do dispositivo" - um único ponto físico em uma tela.

E:

Pixel CSS- uma unidade que mais se aproxima do pixel de referência. [1]

Dois conceitos paralelos com o mesmo nome definitivamente não esclarecem a confusão. Entendo perfeitamente o objetivo de introduzir o segundo, mas acho sua nomenclatura enganosa. O pixel CSS é classificado como uma unidade absoluta e:

"As unidades de comprimento absoluto são fixadas uma em relação à outra." [1]

A declaração acima parece bastante óbvia para todas as unidades, exceto o pixel. Seguindo a especificação w3c:

"Para um dispositivo CSS, essas dimensões são ancoradas (i) relacionando as unidades físicas às suas medidas físicas, ou (ii) relacionando a unidade de pixel ao pixel de referência.

(...) Observe que, se a unidade âncora for a unidade de pixel, as unidades físicas podem não corresponder às suas medidas físicas. Como alternativa, se a unidade âncora for uma unidade física, a unidade de pixels poderá não ser mapeada para um número inteiro de pixels do dispositivo. "[1]

Considerando a citação acima, presumo que as unidades absolutas não são tão absolutas, pois podem estar ancoradas no pixel de referência.

1.2 O pixel de referência

O próprio pixel de referência é na verdade uma medida angular [2]:

"O pixel de referência é o ângulo visual de um pixel em um dispositivo com uma densidade de 96dpi e uma distância do leitor no comprimento de um braço. Para um comprimento nominal de braço de 28 polegadas, o ângulo visual é, portanto, de 0,0213 graus". [1]

O que é ilustrado na imagem abaixo:

Apesar de definir o pixel de referência como um ângulo visual, podemos ler mais:

"Para ler no comprimento do braço,Assim, 1px corresponde a cerca de 0,26 mm (1/96 pol.). "

Deixando as inconsistências de lado, somos capazes de estabelecer um valor do ângulo:

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

where:
    α — a value of the visual angle

Assim, um tamanho da unidade exibida é igual a:

y = 2x * tan(0.01049°)

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

Dada a fórmula acima, para calcular um tamanho de unidade, precisamos determinar qual é a distância real de leitura. Como pode variar entre os usuários, sua categorização foi baseada no DPI de um dispositivo.

1.2.1 DPI

Por conveniência, vamos supor queDPI == PPI.

Essa medida nos permite adivinhar um tipo de exibição. Checagem rápida:

IPhone 6 (4.7 "1334 × 750):326 ppi;Sony Bravia 4K54,6 ", 3840 × 2160):75 ppi.

Portanto, em geral, quanto maior o PPI, mais próximo à tela o usuário fica. A mesa abaixo [3] apresenta recomendações de distância de leitura para dispositivos com DPI específico:

               ———————————————————————————————————————
              |  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       |
 —————————————————————————————————————————————————————

No entanto, não está claro para mim como esses valores de distância foram obtidos. A relação com o DPI é descrita com uma função ou é apenas uma observação empírica?

1.2.2 Proporção de pixels do dispositivo

A introdução da tela Retina complicou ainda mais o assunto. Seu PPI tende a ser aproximadamente duas vezes maior que o não retina, enquanto a distância recomendada para leitura deve permanecer a mesma. Como um tamanho de pixel CSS não corresponde necessariamente a um tamanho de pixel do dispositivo, presumo que o tamanho da unidade na tela Retina seja primeiro convertido em um pixel de referênciaTamanho (expresso em pixels do dispositivo) e multiplicado pela proporção de pixels. Está correto?

1.2.3 Zoom

Ao aumentar o zoom, o tamanho do pixel de referência exibido aumenta [4], aumenta a distância da tela. É bastante contra-intuitivo, porque significa que estamos "nos afastando" da tela, não nos aproximando dela.

2. Questões

Concluindo minhas dúvidas e articulando perguntas:

Como um tamanho de pixel CSS é calculado quando a unidade âncora é uma unidade física?Como estabelecer a fórmula para uma relação entre DPI e uma distância de leitura?Como um tamanho de pixel CSS é calculado para dispositivos DPI / PPI altos e não padrão, como impressoras e monitores Retina?

Além disso, corrija-me se meu raciocínio for inválido ou se estiver faltando alguma coisa. Obrigado pelas respostas.

3. ReferênciasEspecificação W3Cinamidst.com, site de Sean B. PalmerMozzilla Hacks1uirksmode.org