Corrigir imagens na tela Retina

Bjango tem uma lista de dispositivos com tela de alta resolução .

Existem alguns métodos para corrigir imagens da web nesses dispositivos. Aqui está uma lista abrangente desses métodos:

• Imagens SVG

As imagens SVG (Scalable Vector Graphics) são realmente maravilhosas. A Apple usa imagens SVG em seu site para corrigir o problema de retina.

• Folha de estilo dedicada para CSS3 específico de retina

<link rel="stylesheet" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and ( min-resolution: 96dpi ), only screen and (min-resolution: 1.5dppx)" />

• Todo o CSS em um arquivo, incluindo CSS3 específico para retina

@media
only screen e (-webkit-min-device-pixel-ratio: 1,5),
apenas tela e (min – moz-device-pixel-ratio: 1,5),
apenas tela e (-o-min-device-pixel -ratio: 3/2),
somente tela e (min-device-pixel-ratio: 1.5),
somente tela e (min-resolution: 96dpi),
somente tela e (min-resolution: 1.5dppx) {

#element {
    background-image: url('/path/to/image');
    background-size: width height;
}

}

Um método alternativo com suporte limitado (Safari 6 para Mac, Safari para iOS 6 e a versão mais recente do Chromium):

#element {
    background-image: -webkit-image-set(
    url('/path/to/image') 1x, 
    url('/path/to/2x/image') 2x);
}

• 2x imagem inline com <img>tag HTML

<img src="2x-img.jpg" width="1x-width" height="1x-height" alt="" />

• Complemento com substituição de imagem JavaScript

Use JavaScript para detectar a proporção e substituir a imagem de acordo. Evite carregar todas as imagens.

if (window.devicePixelRatio == 2) {
    // Code
}