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.

Image non trouvée !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

Image non trouvée !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.