Des balises intéressantes pour les mobiles
Dans la balise <head>, vous pouvez préciser des informations:
<meta name="viewport" content="width=device-width"/> : Permet d'indiquer que la largeur du site sera équivalente à la largeur de l'écran de l'appareil.
Ou plus rarement <meta name="viewport" content="width=device-height"/> : Permet d'indiquer que la hauteur du site sera équivalente à la hauteur de l'écran de l'appareil.
Il sera toujours
possible d'indiquer une valeur en pixel (px), mais vous perdrez l'avantage de
l'automatisation et donc l'impossibilité de s'adapter aux différentes
tailles des différents mobiles !
Options de zoom
Il est conseillé de préciser le zoom à utiliser par défaut lorsqu'un visiteur arrive sur votre site !
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Vous pourrez aussi préciser:
- le zoom minimal autoriser au visiteur:en ajoutant [...], minimum-scale=0.5 par exemple
- et le zoom maximal avec l'ajout de [...], maximum-scale=5.0
- voire bloquer le zoom: [...], user-scalable=no. Mais vous n'aurez alors pas de d'adaptation du zoom si le visiteur passe en mode portrait à moins de l'associer au zoom maximal
Densité d'affichage
Pour les mobiles dont les écrans sont de taille assez grande (note 2/note 3 et tous les autres...), il peut être judicieux d'indiquer que la densité soit en fait la densité de l'appareil. Dans ce cas, un pixel fait bien un pixel à l'écran:
[...], target-densitydpi=device-dpi
Annexes
Remarque avec
les css:
N'oubliez pas de modifier les attributs min-width ! Une valeur correcte étant
320px, plutôt bien adaptée aux différents mobiles actuellement.