largeur versus largeur de l’appareil
Dans les médias CSS, la différence entre width et device-width peut être un peu confuse, alors développons un peu cela. device-width fait référence à la largeur de l’appareil lui-même, en d’autres termes, à la résolution de l’écran de l’appareil. Disons que la résolution de votre écran est de 1440 x 900. Cela signifie que l’écran a une largeur de 1440 pixels, donc une device-width de 1440px. La plupart des téléphones mobiles ont une largeur d’appareil de 480px ou moins, y compris le populaire iPhone 4 (avec une largeur d’appareil de 320px), bien qu’il ait techniquement une résolution de 640 x 960. Cela est dû à l’affichage rétina de l’iPhone 4, qui fait entrer deux pixels de l’appareil dans chaque pixel CSS de l’écran. C’est également vrai pour l’Ipad 3 ; son device-width rapporté est de 768px tout comme ses prédécesseurs, même si sa résolution d’écran réelle est de 1536px x 2048px. En général, width est plus polyvalent lorsqu’il s’agit de créer des pages Web réactives, bien que device-width soit utile lorsque vous souhaitez cibler spécifiquement les appareils mobiles (et non les ordinateurs de bureau avec une petite fenêtre de navigateur par exemple), car les ordinateurs de bureau ont rarement des résolutions d’écran inférieures à un certain nombre comme 320px x 480px.
Le tableau ci-dessous indique la résolution d’écran et les dimensions des dispositifs médias CSS de certains des appareils populaires existants :
| Appareil | résolution (px) | device-width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, en mode portrait et paysage |
| iPhone 4 | 640 x 960 | 320 x 480, en mode portrait et paysage. device-pixel-ratio est 2 |
| iPhone 5, 5s | 640 x 1136 | 320 x 568, en mode portrait et paysage. device-pixel-ratio est 2 |
| iPhone 6 | 750 x 1334 | 375 x 667, en mode portrait et paysage. device-pixel-ratio est 2 |
| iPhone 6 plus | 1242 x 2208 | 414 x 736, en mode portrait et paysage. device-pixel-ratio est 3 |
| iPad 1 et 2 | 768 x 1024 | 768 x 1024, en mode portrait et paysage |
| iPad 3 | 1536 x 2048 | 768 x 1024, en mode portrait et paysage
La densité de pixels CSS est de 2 |
| Samsung Galaxy S I et II | 480 x 800 | 320 x 533, en mode portrait
La densité de pixels est de 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360 ? x 640 ?, en mode portrait |
| HTC Evo 3D | 540 x 960 | 360 x 640, en mode portrait
La densité de pixels du CSS est de 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, mode paysage |
Pour compliquer encore plus les choses, sur les appareils iPhone et iPad, la largeur de l’appareil correspond toujours à la largeur de l’appareil en mode portrait, que l’appareil soit dans ce mode ou plutôt en mode paysage. Avec les autres appareils, sa device-width change en fonction de son orientation.
* Pour une liste plus complète des appareils et de leurs résolutions d’écran, visitezcette page.
Voyons maintenant quelques requêtes médias CSS supplémentaires qui capturent différents appareils et dimensions d’écran :
/* #### Téléphones mobiles Portrait #### */
@media screen and (max-device-width : 480px) and (orientation : portrait){
/* some CSS here */
}
/* #### Téléphones mobiles Paysage #### */
@media screen and (max-device-width : 640px) and (orientation : landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width : 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width : 320px) and (-webkit-min-device-pixel-ratio : 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio : 2){
/* quelques CSS ici */
}
/* #### iPhone 6 et 6 plus Portrait ou Paysage #### */
@media (min-device-height : 667px) and (min-device-width : 375px) and (-webkit-min-device-pixel-ratio : 3){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width : 768px) and (max-device-width : 1024px){
/* some CSS here */
}
/* #### Desktops #### */
@media screen and (min-width : 1024px){
/* some CSS here */
}
Donc nous avons maintenant une assez bonne idée sur l’utilisation des media queries CSS. Cependant, il y a une autre pièce importante du puzzle dont nous avons besoin pour que tout fonctionne comme prévu, et c’est la balise viewport meta.
- Introduction aux requêtes média CSS
- La largeur par rapport à la largeur de l’appareil
- La balise méta viewport – la clé pour préparer une page pour l’optimisation des appareils mobiles
- La correspondance des requêtes média CSS en JavaScript en utilisant window.matchMedia()
La métabalise viewport- la clé pour préparer une page pour l’optimisation des appareils mobiles 
.