Images pixelisées sur iPad et pas sur MacBook - Retina

Bonjour,

Tout d'abord merci pour l'aide fournie jusqu'à présent par tout les membres de la communauté alsacréation!

Voici mon problème:

Je suis actuellement sur un projet web et j'aimerais adapter mes contenus images sur les écrans Retina.
Je parle ici exclusivement des background-image et sprite.

J'ai créé mes 2 sprites: sprite.png(1200px de large) et sprite-m@2x.png(2400px de large) créés sous Illustrator et exportés en png <- les sprites sont grands, c'est normal.

En tout cas, avec mes

@media (-webkit-min-device-pixel-ratio)

, sur un MacBook Retina mon sprite en 2X est bien chargé, et affiche des images non pixelisées, alors que sur un iPad Air Retina je me retrouve avec des images très pixelisées.

J'ai effectué des tests en mettant des

content:"test";

à mes classes dans mes @media(-webkit-min-device-pixel-ratio), qui prouvent que la @media est interprétée. Le plus étrange c'est que avec une autre série de sprites social.png et social-m@2x.png, sur le même ipad et dans les mêmes @media (-webkit-min-device-pixel-ratio), je me retrouve avec des images de bonne qualité.

À noter que mes @media sont à la fin de mon css, pour qu'elles soient interprétées en dernier.

Je suis donc face à un paradoxe:

-est-ce la qualité de mon image de base qui donne cet effet? si oui, pourquoi un MacBook Retina les affiche-t-il correctement et pas l'iPad Air?

ou

-est-ce mes @media qui sont fausses? si oui pourquoi ça marche avec les sprites social.png?

Voici plusieurs test de @media effectués jusqu'à présents:

@media screen and
(-webkit-min-device-pixel-ratio: 1.5) and 
(orientation : landscape){

#description-home:before{
        content:"test";
        background: url('../img/sprite-m@2x.png') no-repeat -472px -723px;
        background-size:1200px auto;
    }

/* le "test" s'affiche en landscape mais l'image est pixelisée */

}

@media screen and
(-webkit-min-device-pixel-ratio: 1.5) and 
(min-resolution: 144dpi) { 

#description-home:before{
        background: url('../img/sprite-m@2x.png') no-repeat -472px -723px;
        background-size:1200px auto;
    }


/* ne marche que sur MacBook  */

}

Je me doute que tout ceci est très flou, n'hésitez pas à me poser des questions. Je ne sais pas quelqu'un a déjà été confronté à ce problème mais je suis à court d'idées, et internet ne m'a donnée beaucoup d'aide à ce sujet!

Merci d'avance pour vos réponses

Passez une bonne semaine
Modifié par DrasLeona (01 Jun 2015 - 15:25)