Adapter son design à tous les supports (tablettes, smartphone, pc etc…) devient un travail supplémentaire. Pour l’ipad3, nous allons ajouter les medias queries apparues avec les spécifications CSS3, nécessaires et créer nos images afin d’avoir une qualité accrue.

Attention, ces media queries ne fonctionnent que si la propriété width=device-width et height=device-height sont désactivées de la balise meta viewport.

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
    /* styles ici pour landscape (horizontal) et portrait (vertical) */
}

Pour préciser dans la media query si la cible est landscape ou portrait seulement, il nous suffit d’ajouter l’attribut orientation :

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { 
     /* styles ici pour landscape (horizontal) seulement */
}

Les images seront donc a revoir car sur l’ipad3 par exemple, même avec une image en 300dpi elle ne sera pas optimisée et nette…

La solution consiste donc pour une image en affichage de 59px par 59px, il faudra donc la doublée pour l’écran rétina et de renseigner le background-size dans le css …

/* normal screens */
.custom-img{
      background-image: url('../img/normal/img1.png');
      background-size: 59px 59px;
   }

/* retina screens */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation: portrait)  
and (-webkit-min-device-pixel-ratio: 2){

   .custom-img{
      background-image: url('../img/retina/img1.png');
      background-size: 59px 59px;
   }
}

Nos images sont maintenant nettes sur notre ipad3 🙂

Plus d’informations :

http://stephen.io/mediaqueries/
http://retina-images.complexcompulsions.com/
http://media-queries.aliasdmc.fr/meta_viewport_et_viewport_css_mobile.php

Linkedin

Twitter

Facebook

Reddit