Ce blog explique comment utiliser une balise meta viewport pour une conception Web réactive en HTML :
Qu'est-ce que la balise Meta Viewport ?
Le ' fenêtre ' est la balise la plus importante pour créer un design réactif en contrôlant la façon dont le contenu apparaît sur différentes tailles d'écran. Cette balise est placée à l'intérieur du '
Différents attributs de la balise Meta Viewport
La balise meta viewport a les attributs suivants qui peuvent être placés comme valeur pour le ' contenu ' attribut:
attribut 'largeur'
Le ' largeur ” L'attribut spécifie la zone visible d'une page Web pour le contenu verticalement. Sa balise meta ressemble à ceci :
< méta nom = 'fenêtre' contenu = 'width=device-width' >
attribut 'hauteur'
Le ' hauteur ” définit la longueur verticale de la page Web pour garantir que la hauteur de la fenêtre d'affichage correspond à la hauteur de l'écran. Sa balise meta ressemble à ceci :
< méta nom = 'fenêtre' contenu = 'hauteur=400' >
Attribut 'Échelle initiale'
Le ' Échelle initiale ” L'attribut garantit que la page Web s'affiche à un niveau de zoom approprié lors du premier chargement. Par exemple, visitez le code ci-dessous :
< méta nom = 'fenêtre' contenu = 'width=device-width, initial-scale=1.0' >attribut 'échelle maximale'
Le ' échelle maximale ' L'attribut spécifie le niveau de zoom maximal de la page Web pour éviter les problèmes de mise en page :
< méta nom = 'fenêtre' contenu = 'width=device-width, maximum-scale=1.0' >
attribut 'échelle minimale'
Le ' échelle minimale ” est utilisé pour empêcher l'utilisateur de trop dézoomer en spécifiant le niveau d'échelle de dézoom minimum :
< méta nom = 'fenêtre' contenu = 'width=device-width, minimum-scale=0.5' >attribut 'évolutif par l'utilisateur'
Le ' évolutif pour l'utilisateur ” l'attribut permet ou non à l'utilisateur de faire un zoom arrière ou un zoom avant sur l'écran de la page Web en définissant la valeur sur “ Non ' ou ' Oui ”. La balise meta qui permet à l'utilisateur d'effectuer un zoom avant ou arrière est :
< méta nom = 'fenêtre' contenu = 'width=device-width, user-scalable=yes' >Comment utiliser la balise Meta Viewport pour une conception Web réactive en HTML ?
Pour mieux comprendre l'utilisation d'une balise méta de fenêtre d'affichage pour la conception Web réactive. Passons en revue un exemple :
Supposons qu'à l'intérieur du ' Après la compilation de l'extrait de code ci-dessus, la page Web ressemble à ceci : La sortie indique que le contenu n'est pas réactif car il ne s'affiche pas parfaitement sur les petits appareils. Maintenant, pour le rendre réactif, ajoutez le ' fenêtre ” balise méta : Après la mise à jour du code, la page Web ressemble à ceci sur différentes tailles d'écran : La sortie finale montre que la page Web est désormais réactive après l'ajout d'une balise méta à l'intérieur du ' La balise méta de la fenêtre d'affichage permet au développeur de fournir un ensemble d'instructions au navigateur qui définit la manière dont la page Web s'affiche sur différents appareils de taille d'écran. La balise meta est placée à l'intérieur du '
< p >
< b > Propulsé par Linuxhint, pour mieux comprendre la balise méta de la fenêtre d'affichage, ouvrez la page Web sur différents écrans taille appareils.< / b >
< / p >
< image src = '../bg.jpg' tout = 'Pirate' largeur = '460' hauteur = '3. 4. 5' >
< p style = 'remplissage : 5px' >
< je >Rejoignez l'équipe Linuxhint < / je >
Propulsé par Linuxhint, pour mieux comprendre la balise méta de la fenêtre d'affichage, ouvrez la page Web sur différents écrans taille devices.Powered by Linuxhint, pour mieux comprendre la balise méta de la fenêtre d'affichage, ouvrez la page Web sur différents écrans taille devices.Powered by Linuxhint, pour mieux comprendre la balise méta de la fenêtre d'affichage, ouvrez la page Web sur différents écrans taille devices.Powered by Linuxhint, pour mieux comprendre la balise méta de la fenêtre d'affichage, ouvrez la page Web sur différents écrans taille dispositifs.
< / p >
< / div >
< méta nom = 'fenêtre' contenu = 'width=device-width, initial-scale=1.0' / >
< / diriger >
Conclusion