Comme vous le savez sûrement, les écrans des smartphones sont beaucoup moins larges que nos écrans habituels (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent le site en « dézoomant », ce qui permet d'avoir un aperçu de l'ensemble de la page. La zone d'affichage simulée est appelée le viewport : c'est la largeur de la fenêtre du navigateur sur le mobile.
En CSS, avec les media queries, si vous ciblez l'écran avec max-width sur un mobile, celui-ci va comparer la largeur que vous indiquez avec celle de son viewport. Le problème, c'est que le viewport change selon le navigateur mobile utilisé !
Navigateur |
Largeur du viewport par défaut |
Opera Mobile |
850 pixels |
iPhone Safari |
980 pixels |
Android |
800 pixels |
Windows Phone 7 |
1024 pixels |
Un iPhone se comporte comme si la fenêtre faisait 980 px de large, tandis qu'un Android se comporte comme si la fenêtre faisait 800 px !
Pour cibler les smartphones, plutôt que d'utiliser max-width, il peut être intéressant de recourir à max-device-width : c'est la largeur du périphérique. Les périphériques mobiles ne dépassant pas 480 px de large, on pourra viser uniquement les navigateurs mobiles avec cette media query :
@media all and (max-device-width: 480px) { /* Vos règles CSS pour les mobiles ici */ } |
Pourquoi ne pas cibler les mobiles avec la règle media handheld ?
Je vois que vous suivez, très bien ! En effet, on peut (en théorie) cibler les écrans mobiles avec le media handheld… Malheureusement, aucun navigateur mobile à part Opera mobile ne reconnaît handheld. Ils se comportent tous comme s'ils étaient des écrans normaux (screen). On ne peut donc pas vraiment utiliser handheld pour viser les mobiles.
Vous pouvez modifier la largeur viewport du navigateur mobile avec une balise meta à insérer dans l'en-tête (<head>) du document :
<meta name="viewport" content="width=320" /> |
Vous pouvez utiliser cette balise pour modifier la façon dont le contenu de votre page s'organise sur les mobiles. Pour obtenir un rendu facile à lire, sans zoom, vous pouvez demander à ce que le viewport soit le même que la largeur de l'écran :
<meta name="viewport" content="width=device-width" /> |
Créé avec HelpNDoc Personal Edition: Créer des documents d'aide PDF facilement