Retina DisplayTelas com alta densidade de pixels

Telas com alta densidade de pixels

http://imageshack.us/photo/my-images/203/2222u.png/sr=1

“Because the Retina display's pixel density is so high, your eye is unable to distinguish individual pixels.” - Apple Inc.

Apple e o restoO termo Retina Display foi anunciado pela Apple. Porém, isso não quer dizer que são os únicos com a tecnologia.

Nexus One (1.5) Galaxy S II (1.5) Galaxy Nexus (2)

CSS Pixel RatioÉ bem diferente dos pixels reais do dispositivo. 100px sempre serão 100px com CSS Pixel Ratio.

http://migre.me/9kefdA pixel is not a pixel is not a pixel

Media Queries@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { ...}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { ...}

1.5 pixel ratio

2.0 pixel ratio

var dpr = 1;if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;

Javascript

LayoutsAlgumas coisas para ter em conta quando implementar um layout “responsive” com suporte para Retina Display.

• Entenda a diferença entre as queries min-device-width e min-width.

• Aproveite o poder de navegadores de última geração.

• Use CSS para fazer degrades, cantos arredondados e sombras.

• Economize banda do jeito que puder.

• Use webfonts para seus icones.

• Estude alternativas vetoriais como SVG.

• Aprenda como funcionam os frameworks.

ImagensFique de olho no peso das imagens. Plano de dados não é barato!A menos que o projeto seja um aplicativo nativo.

#header { width:100px; height:50px; background:url(logo.png) }

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

#header { background:url(logo@2x.png); background-size:50%; }

}

http://migre.me/9kg0CjQuery Retina Plugin

No caso de tags <img> utilize js para substituir versões da imagem.

TipografiaNada supera um bom estudo tipográfico para seu site. Renderizar texto com qualidade também é super importante.

• Saiba escalar suas fontes.

• Aproveite as vantagens do @font-face.

• text-rendering: optimizeLegibility; para otimizar kerning e ligaduras.

• Use text-shadow, e outras propriedades em vez de imagens.

http://migre.me/9kgS4Cross-browser kerning-pairs & ligatures

Obrigado.contato@juanpujol | twitter: @juanpujol