L’autre jour j’ai eu à réaliser un site mobile j’ai donc cherchée les médias queries, ils sont regroupé ici.

Iphone 3 portrait :

@media all and (min-device-width: 320px) and (max-width: 480px) and (orientation: portrait) {
	#header{
		background: url(images/css3.png) no-repeat;
	}
}

Iphone 3 paysage :

@media all and (min-device-width: 320px) and (max-width: 480px) and (orientation: landscape) {
	#header{
		background: url(../images/css3.png) no-repeat center top;
	}
}

Iphone 4 (Retina) :

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {
	 #header{
		background-image: url(images/css3n@2x.png);
		background-size: 30px 30px; /* nouvelle image de 60px par 60px */
	}
}

Pour designer pour les écrans retina, il faut créer deux versions des images que vous voulez optimiser pour les écrans à grosses résolutions. Créez une première image avec la taille réelle utilisée dans votre design, dans mon exemple : « css3.png ». Exportez ensuite une deuxième image en multipliant les dimensions par 2… Utilisez idéalement des éléments vectoriels pour ne pas avoir de perte de qualité ou refaite le même élément avec une taille deux fois plus grande. L’idéal est d’adopter une convention pour nommer vos images, personnellement j’utilise la même convention que dans le language IOS à savoir « nom-de-image@2x.png » donc ici ce sera « css3@2x.png ».

J’ai trouvée également ce lien sur twitter : http://bit.ly/pixelratio. Il vous permettra d’afficher certaines informations utiles de votre navigateur mobile tels que :

  • son ratio de pixels (device pixel-ratio)
  • son orientation (portrait ou landscape)
  • sa valeur de screen.width (largeur d’écran)
  • sa valeur de viewport (largeur de fenêtre)
  • sa valeur de device-width selon l’orientation

Les résultats sont parfois surprenants selon les terminaux (Attention : certains navigateurs ne retourne pas les valeurs correcte pour screen-width et viewport )

Source

Voici ce qu’on obtient avec les téléphones suivants (émulateur pour iphone et ipad).

Iphone 3

  • Orientation : portrait / landscape
  • device-width : 320px
  • pixel-ratio : 1
  • screen-width : 320px
  • viewport : 980px

Iphone 4 (Retina)

  • Orientation : portrait / landscape
  • device-width : 320px
  • pixel-ratio : 2
  • screen-width : 320px
  • viewport : 980px

Ipad

  • Orientation : portrait / landscape
  • device-width : 768px
  • pixel-ratio : 1
  • screen-width : 768px
  • viewport : 980px

Android (Galaxy Ace)

  • Orientation : portrait / landscape
  • device-width : 800px
  • pixel-ratio : 1
  • screen-width : 800px
  • viewport : 800px

Pour ce dernier je trouve les valeurs bizarre… J’aurais plutôt pensée que les valeurs aurais été celle de l’Iphone 3. Si quelqu’un à une explication !

Pour en savoir plus :