J'ai tendance à utiliser ceci:
Bien que je vois que cela est beaucoup recommandé:
Cela signifie que le navigateur rendra (probablement) la largeur de la page à la largeur de son propre écran. Donc, si cet écran a une largeur de 320 pixels, la fenêtre du navigateur aura une largeur de 320 pixels, plutôt qu'un zoom arrière et un affichage de 960 pixels (ou tout ce que fait cet appareil par défaut, au lieu d'une balise méta réactive).
Remarque: n'utilisez pas de balise Meta responsive si votre site Web n'est pas spécialement conçu pour être réactif et fonctionner correctement à cette taille, car cela aggravera l'expérience.
Cette balise prend en charge d'autres attributs:
| Biens | Description |
|---|---|
| largeur | La largeur de la fenêtre virtuelle de l'appareil. |
| largeur de l'appareil | La largeur physique de l'écran de l'appareil. |
| la taille | La hauteur de la «fenêtre virtuelle» de l'appareil. |
| hauteur de l'appareil | La hauteur physique de l'écran de l'appareil. |
| échelle initiale | Le zoom initial lors de la visite de la page. 1.0 ne fait pas de zoom. |
| échelle minimale | Le montant minimum que le visiteur peut zoomer sur la page. 1.0 ne fait pas de zoom. |
| échelle maximale | Le montant maximum que le visiteur peut zoomer sur la page. 1.0 ne fait pas de zoom. |
| évolutif par l'utilisateur | Permet à l'appareil d'effectuer un zoom avant et arrière. Les valeurs sont oui ou non. |
Il est généralement recommandé de ne pas empêcher la mise à l'échelle, car c'est ennuyeux et potentiellement un problème d'accessibilité.
Vous voudrez probablement aussi ceci dans votre CSS:
@-ms-viewport( width: device-width; )Bon à savoir: changer la valeur de cette balise meta avec JavaScript fonctionne, la page réagira à la nouvelle valeur. Soit la balise entière et remplacez, soit changez la contentpropriété. Ce n'est pas un besoin très commun, mais cela peut survenir.