Conception Web Responsive - La Fenêtre d'Affichage
Définir la Fenêtre d'Affichage
La fenêtre d'affichage est la zone visible d'une page web pour l'utilisateur.
Elle varie selon l'appareil (elle sera beaucoup plus petite sur un téléphone mobile que sur un écran d'ordinateur).
Vous devez inclure l'élément suivant <meta> dans la section <head> de toutes vos pages web :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Cela donne des instructions au navigateur sur la façon de contrôler les dimensions et le zoom de la page.
La partie width=device-width définit la largeur de la page pour qu'elle suive la largeur de l'écran de l'appareil (qui variera selon le dispositif).
La partie initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple d'une page web sans la balise meta de la fenêtre d'affichage, et la même page web avec la balise meta de la fenêtre d'affichage :
Astuce : Si vous parcourez cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessus pour voir la différence.
Adapter le Contenu à la Fenêtre d'Affichage
Les utilisateurs ont l'habitude de faire défiler les sites web verticalement sur les ordinateurs de bureau et les appareils mobiles, mais pas horizontalement !
Ainsi, si l'utilisateur est contraint de faire défiler horizontalement ou de zoomer pour voir l'ensemble de la page web, cela entraîne une mauvaise expérience utilisateur.
Voici quelques règles supplémentaires à suivre :
1. NE PAS utiliser de grands éléments à largeur fixe - Par exemple, si une image a une largeur supérieure à celle de la fenêtre d'affichage, cela provoque un défilement horizontal. N'oubliez pas d'ajuster ce contenu pour qu'il s'adapte à la largeur de la fenêtre d'affichage.
2. NE PAS laisser le contenu dépendre d'une largeur particulière pour bien s'afficher - Étant donné que les dimensions des écrans varient considérablement entre les appareils, le contenu ne doit pas dépendre d'une largeur de fenêtre d'affichage spécifique pour bien s'afficher.
3. Utilisez des requêtes média CSS pour appliquer un style différent pour les petits et grands écrans - Définir de grandes largeurs CSS absolues pour les éléments de la page entraînera des éléments trop larges pour les petits appareils. Au lieu de cela, envisagez d'utiliser des valeurs de largeur relatives, telles que width: 100%. De plus, faites attention à l'utilisation de grandes valeurs de positionnement absolu, car cela peut entraîner le fait que l'élément sorte de la fenêtre d'affichage sur les petits appareils.