Retina iPad spécifique CSS

Je suis de la conception d'un site responsive qui aura un aspect différent sur les appareils mobiles. J'ai trois requêtes de média dans mon css en plus d'une requête pour l'affichage de la rétine(s).

/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}

/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}

/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}

/**  RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}

Lorsque l'iPad est en mode portrait, il va obtenir la version mobile, mais quand il est en mode paysage, il va obtenir la version normale du site.

Mon problème est le suivant, maintenant avec le "nouvel iPad" et l'écran retina, certaines images de la rétine ne sont pas alignés correctement pour le paysage de la rétine iPad version. Le mondial de la rétine css est à prendre en compte le css normal et il est censé le faire, je suppose.

Par exemple, dans la version mobile, j'ai une image de fond centré sur l'écran, mais sur le site régulièrement, il est aligné à gauche.

Quelqu'un connais un moyen de cibler uniquement les images de la rétine pour iPad seulement en CSS?

Grâce

Edit: c'est Ce que j'ai été jouer avec, mais il ne semble pas fonctionner:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

source d'informationauteur user127181

  1. 13

    Compris.

    J'ai eu mon iPad Retina requête en dessous de toutes les autres requêtes, mais ils avaient besoin d'être au-dessus de l'autre des requêtes à partir de la plus grande à la plus petite.

  2. 4

    Essayer:

    @media only screen 
  and (min-device-width: 1536px)
  and (max-device-width: 2048px)
  and (orientation : landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
      // Retina iPad specific CSS
}
  3. 3

    J'ai eu le même problème et je l'ai résolu en utilisant:

    @media only screen and (max-width: 960px), only screen and (max-device-width: 960px) and (-webkit-device-pixel-ratio: 1.5)

    Pour la méta viewport j'utilise:

    content="width=device-width; initial-scale=1; maximum-scale=1"

    Je ne sais pas si c'est une solution parfaite, mais il fonctionne.