web-dev-qa-db-fra.com

Comment utilise-t-on la balise meta viewport et que fait-elle?

  1. Quels navigateurs supportent cette balise meta?
  2. Comment puis-je l'utiliser?
  3. Est-ce que cela signifie que cela résoudra tous mes problèmes de redimensionnement mobile?

Si quelqu'un pouvait répondre à cette question, cela aiderait beaucoup les débutants en apprentissage. 

<meta="viewport">
25
Kyle Yeo
  1. Le support de la fenêtre de visualisation est un peu partout. Je vous indiquerai la page Quirksmode pour la prise en charge du navigateur de viewport } _ pour plus de détails.
  2. Vous utilisez la balise META de la fenêtre d'affichage comme n'importe quelle autre balise META. Placez le bloc de code directement dans le <head>.
  3. C'est à peu près tout, mais encore une fois, une petite bouchée à dire ici. Je vous conseillerais en lisant certains articles } _, en lisant les meilleures pratiques pour la conception Web mobiles de W3 } ou les spécifications actuelles de W3 sur l'attribut viewport pour la balise <meta> .

En bref, l'ajout de cette ligne à un site Web devant implémenter la mise à l'échelle de la fenêtre d'affichage devrait résoudre la plupart des problèmes. (Copié à partir de l'article Article "Astuce: ne oubliez pas la balise méta Viewport de WebDesignTuts +" } _)

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

P.S. Quirksmode a également un article plutôt magnifique décrivant le problème qu'il est bon de lire pour comprendre pourquoi cela pourrait être utile.

21
Nightfirecat

Un autre article sur Meta Viewport, ses différentes propriétés et son utilisation dans vos conceptions est http://dev.opera.com/articles/view/an-inintroduction-to-meta-viewport-and-viewport/

Il y a aussi un slidedeck expliquant les choses en détail et un Github repo pour les accompagner. 

Avertissement: je suis l'auteur de ces ressources.

6
andreasbovens

Vous pouvez voir tous les détails du blog mozilla

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

3
Miqdad Ali

La balise Meta viewport permet d’ajuster la taille et la visibilité du site Web en fonction de la taille de l’écran de visualisation. La page Web s'adapte automatiquement à Android, à une tablette ou à un iphone.

0
Akash Kumar Singh