HTML5 / CSS3/ ios/ iPad

CSS3 específico para iPad Retina

css3

Existem aproximadamente 30 milhões de iPads retinas no mercado, e 9 andam visitando esse site. Esse post vai mais para quem cria soluções em CSS3, Javascript,etc. E a turma do design responsivo.

Enquanto você procura uma maneira ideal para distribuir seus gráficos para N densidades, o CSS3 pode te ajudar a recuar essa busca e transformar seu projeto em uma forma mais agradável.

@media only screen and (-webkit-min-device-pixel-ratio : 2), 
only screen and (min-device-pixel-ratio : 2) 
{ 
   #class_imagem{ background-image: url('../images/background-retina.png');
 }

Use media-queries especificando o pixel ratio do dispositivo, para telas retinas use 2, para Android Tablets use 1.5 e o Galaxy S3/4 use o fator 1.3

Gostou da dica? Faça sugestões com outras soluções que vocês tem encontrado por ai.

4 thoughts on “CSS3 específico para iPad Retina

  1. Bom artigo Igor!

    Só um detalhe: a “min-device-pixel-ratio” não faz parte da spec, é algum especifico do webkit. Só faz sentido usar a versao prefixada mesmo com “-webkit-min-device-pixel-ratio” e pra todos os outros browsers, usar a versao da spec com “min-resolution” (inclusive o Chrome suporta as 2 já).

    Escrevi um artigo sobre isso tambem: http://sergiolopes.org/media-queries-retina/

  2. Outro detalhe: o Galaxy S3 também usa pixel ratio 2, como as telas retina da Apple. Alguns Androids mais lowend usam 1.5 como você falou e o 1.3 é usado só no Nexus 7 até onde eu sei. O Galaxy S4 usa pixel ratio 3, assim como o HTC One e outros celulares com resolução Full HD (1080p).

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *