CSS3 Media Queries Virtual Pixels

29/06/2011 - 20:46 - por: Pedro Costa Neves

postato em: All, Old

Comentários neste post: Comentários.

Esta é uma dica rapida pra quem está utilizando Media Queries do CSS3 e não tá entendendo por que raios o iPhone 4 não tem width de 480 e sim 320 quando se usa device-width.

Vamos lá

Isso se chama Virtual Pixels, nos iPhones anteriores ao 4 o Virtual Pixel era medido de 1:1, no 4 é medido de 2:1. Mas, o que isso significa?

Significa que 1 Virtual Pixel é igual a 1 Pixel Físico, como temos retina display no iPhone 4 e pra haver compatibilidade entre os sites feitos até então foi feito 2:1, ou seja, 2 Virtuais Pixels para 1 Pixel Físico.

Sendo assim, o max-device-width do iPhone 4 se torna 320px

Exemplo de Media Query com max e min device-width:

@media screen and (max-device-width: 320px) {
body {
background: orange;
}
}
@media screen and (min-device-width: 320px){
body {
background: green;
}
}

Ok e no iPad? temos Virtual Pixel de 1:1 e width de 1024px

Simples assim, pros androids vale a mesma regra, se não tem retina display é 1:1 se tem 2:1 pra haver compatibilidades.

Basta apenas saber o width do seu device e mãos a obra