CSS Pixel, DIP e Pixel Fisico

[edgaroli...@gmail.com]

Olá,

Estou a ler sobre DIP, CSS Pixel e Pixel físicos.
Ok, vamos lá! (Este assunto dá nó na cabeça :)

• CSS Pixel é a relação entre Pixel Fisico e o Zoom dado pelo utilizador!
• Pixel Fisico é o tamanho real no aparelho!
• DIP, para device pixel ratio diferentes de 1 temos o device independent pixel!

Caso de exemplo:

• CSS Pixels = 980 (neste caso o zoom dado pelo utilizador foi de 1.5, porque 980/640 = 1.5), certo?
  
• DIP = 320
• Pixel Fisico = 640

Isto significa que o device pixel ratio é igual a 2, porque 640/320 = 2.

"A relação entre DIP e pixels físicos é: número de DIPs × devicePixelRatio = número de device pixels. Já a relação entre CSS pixel e DIP tem a ver com o viewport que estamos usando. Como, na maioria dos sites otimizados pra mobile, vamos usar device-width , então: um CSS pixel = um DIP."

"A relação entre DIP e pixels físicos é: número de DIPs × devicePixelRatio = número de device pixels." - Esta parte percebi - Posso chamar número de device pixels como Pixel Fisico, certo?

"Já a relação entre CSS pixel e DIP tem a ver com o viewport que estamos usando. Como, na maioria dos sites otimizados pra mobile, vamos usar device-width , então: um CSS pixel = um DIP." - Se o viewport é a tela de exibição, significa que se utilizamos device-with, nosso viewport será igual ao tamanho da tela! Neste caso 640!? Esta última frase não percebi!

Obrigado pela ajuda

[Sérgio Lopes]

Oi Edgar,

Ótimas perguntas. Algumas consideracoes:

• CSS Pixel é a relação entre Pixel Fisico e o Zoom dado pelo utilizador!

• CSS Pixels = 980 (neste caso o zoom dado pelo utilizador foi de 1.5, porque 980/640 = 1.5), certo?
  

No Mobile, a relação do CSS pixel é com DIP e tem a ver com o viewport utilizado, não o zoom do usuário. O usuário fazer o pinch-to-zoom não muda o CSS pixel. O que muda o CSS pixel é o viewport utilizado, apenas isso.

Ja no Desktop a situacao muda um pouco porque o page-zoom no Desktop é diferente do zoom do mobile e ele muda o devicePixelRatio e o CSS pixel; aí sua conta tá certa.

Sim, é uma zona :-P

 

"A relação entre DIP e pixels físicos é: número de DIPs × devicePixelRatio = número de device pixels." - Esta parte percebi - Posso chamar número de device pixels como Pixel Fisico, certo?

Ate pode, mas eu prefiro esses nomes mais distintos: DIP x CSS pixel x pixel fisico. Isso poque o termo "device pixel" é usado por aí em muitos contextos diferentes. As vezes ele quer dizer pixel fisico como vc falou, mas as vezes ele quer dizer DIP (como ao usar a media query device-width).

 

"Já a relação entre CSS pixel e DIP tem a ver com o viewport que estamos usando. Como, na maioria dos sites otimizados pra mobile, vamos usar device-width , então: um CSS pixel = um DIP." - Se o viewport é a tela de exibição, significa que se utilizamos device-with, nosso viewport será igual ao tamanho da tela! Neste caso 640!? Esta última frase não percebi!

Então, aqui é mais uma confusão nos nomes. Por isso que "device pixel" nem sempre quer dizer "pixel fisico".

Ao usar viewport com width=device-width na verdade estamos falando pra ele usar o viewport ideal considerado pela plataforma. E isso em DIPs. Então num iPhone retina 640px fisicos, o device-width é 320 DIP pq o dPR é 2. 

Abraço