Qu'est-ce que la fenêtre?
La fenêtre est la zone visible de l'utilisateur d'une page Web.
La fenêtre varie avec le dispositif, et sera plus petit sur un téléphone mobile que sur un écran d'ordinateur.
Avant les tablettes et les téléphones mobiles, les pages web ont été conçus uniquement pour les écrans d'ordinateur, et il était courant pour les pages Web d'avoir une conception statique et une taille fixe.
Puis, quand nous avons commencé à surfer sur Internet en utilisant les tablettes et les téléphones mobiles, les pages web de taille fixe sont trop volumineux pour tenir la fenêtre. Pour résoudre ce problème, les navigateurs sur les appareils mis à l'échelle en bas de la page Web entière pour adapter l'écran.
Ce ne fut pas parfait !! Mais une solution rapide.
Réglage de la fenêtre
HTML5 introduit une méthode pour laisser les concepteurs web prendre le contrôle de la fenêtre, à travers le <meta> tag.
Vous devez inclure les éléments suivants <meta> élément de fenêtre dans toutes vos pages web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> élément de fenêtre donne les instructions du navigateur sur la façon de contrôler les dimensions et mise à l' échelle de la page.
La width=device-width partie définit la largeur de la page pour suivre l'écran-largeur du dispositif (qui varie en fonction de l'appareil).
L' initial-scale=1.0 partie définit le niveau de zoom initial lorsque la page est d' abord chargé par le navigateur.
Voici un exemple d'une page Web sans la balise meta viewport, et la même page web avec la balise meta viewport:
Astuce: Si vous naviguez sur cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens pour voir la différence.
Taille du contenu à la fenêtre
Les utilisateurs sont utilisés pour faire défiler des sites Web verticalement sur les ordinateurs de bureau et les appareils mobiles - mais pas horizontalement!
Donc, si l'utilisateur est obligé de faire défiler horizontalement, ou un zoom arrière, pour voir la page Web entière, il en résulte une mauvaise expérience utilisateur.
Quelques règles supplémentaires à suivre:
1. Ne pas utiliser de grands éléments de largeur fixe - Par exemple, si une image est affichée à une largeur supérieure à la fenêtre , il peut provoquer la fenêtre pour faire défiler horizontalement. Rappelez-vous de régler ce contenu pour tenir dans la largeur de la fenêtre.
2. Ne laissez pas le contenu reposent sur une largeur de fenêtre particulière pour bien rendre - Depuis dimensions de l' écran et la largeur en pixels CSS varient considérablement entre les appareils, le contenu ne doit pas compter sur une largeur de fenêtre particulière pour bien rendre.
3. Utilisez CSS requêtes des médias pour appliquer un style différent pour petits et grands écrans - Définition de grandes largeurs de CSS absolues pour les éléments de page, causeront l'élément à être trop large pour la fenêtre sur un appareil plus petit. Au lieu de cela, envisager d'utiliser des valeurs de largeur relatives, telles que la largeur: 100%. Aussi, soyez prudent d'utiliser de grandes valeurs de positionnement absolu. Il peut amener l'élément à tomber en dehors de la fenêtre sur les petits appareils.