Fenêtre de conception Web réactive


Table des matières

    Afficher la table des matières


Qu'est-ce que la fenêtre d'affichage ?

La fenêtre d'affichage est la zone visible par l'utilisateur d'une page Web.

La fenêtre d'affichage varie selon l'appareil et sera plus petite sur un téléphone mobile que sur un écran d'ordinateur.

Avant les tablettes et les téléphones mobiles, les pages Web étaient conçues uniquement pour les écrans d'ordinateur. les pages Web doivent avoir une conception statique et une taille fixe.

Puis, lorsque nous avons commencé à surfer sur Internet avec des tablettes et des téléphones portables, nous avons résolu la taille des pages Web était trop grande pour s'adapter à la fenêtre d'affichage. Pour résoudre ce problème, les navigateurs de ces appareils ont réduit la totalité de la page Web pour l'adapter à l'écran.

Ce n'était pas parfait !! Mais une solution rapide.


Définition de la fenêtre

HTML5 a introduit une méthode permettant aux concepteurs Web de prendre le contrôle de la fenêtre d'affichage, via le Balise .

Vous devez inclure l'élément de fenêtre d'affichage suivant dans toutes vos pages Web :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cela donne au navigateur des instructions sur la façon dont pour contrôler les dimensions et la mise à l'échelle 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 varie en fonction de l'appareil).

La partie initial-scale=1.0 définit le niveau de zoom initial lors du premier chargement de la page par le navigateur.

Voici un exemple d'une page Web sans la balise méta viewport, et de la même page Web avec la balise méta viewport :


Conseil : 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.


Dimensionner le contenu dans la fenêtre

Les utilisateurs sont habitués à faire défiler les sites Web verticalement sur ordinateur et mobile appareils - mais pas horizontalement !

Ainsi, si l'utilisateur est obligé de faire défiler horizontalement ou de faire un zoom arrière pour voir le page Web entière, cela entraîne une mauvaise expérience utilisateur.

Quelques règles supplémentaires à suivre :

1. N'utilisez PAS d'éléments de grande largeur fixe - Par exemple, si une image est affichée avec une largeur plus large que la fenêtre d'affichage, cela peut provoquer le fenêtre pour faire défiler horizontalement. N'oubliez pas d'ajuster ce contenu pour qu'il s'adapte à la largeur de la fenêtre.

2. Ne laissez PAS le contenu dépendre d'une largeur de fenêtre particulière pour rendu bien - Étant donné que les dimensions de l'écran et la largeur en pixels CSS varient largement entre les appareils, le contenu ne doit pas dépendre d'une largeur de fenêtre d'affichage particulière pour bien rendre.

3. Utilisez les requêtes multimédias CSS pour appliquer un style différent aux petites et grands écrans - Définition de grandes largeurs CSS absolues pour les éléments de page l'élément sera trop large pour la fenêtre d'affichage d'un appareil plus petit. Envisagez plutôt d'utiliser des valeurs de largeur relatives, telles que width : 100 %. Être aussi attention à utiliser de grandes valeurs de positionnement absolues. Cela pourrait faire en sorte que l'élément tomber en dehors de la fenêtre d’affichage sur les petits appareils.