La balise meta viewport est-elle vraiment nécessaire?

J’ai créé quelques sites réactifs mais je suis plutôt nouveau sur le développement de sites réactifs. Dans mon CSS, 99% de mes valeurs sont en ems ou en pourcentages. J’utilise des requêtes multimédia (max-width et max-device-width) pour modifier la disposition. Je n’ai pas inclus de balise meta viewport et cela fonctionne parfaitement sur iOS, un certain nombre de téléphones et de tablettes Android sur lesquels j’ai testé et tous les navigateurs de bureau.

L’ajout d’une balise META brise mon site. Est-ce que je fais quelque chose de mal ou fait quelque chose de bien pour que je n’aie pas besoin de l’inclure? Je ne comprends pas pourquoi cela semble être une bonne pratique, car cela me brise le moral.

Est-ce que je manque quelque chose?

Sur les systèmes d’exploitation de bureau, les fenêtres de navigateur ont un nombre de pixels fixe et le contenu de la page Web est rendu tel quel.

À partir de Safari sur iOS (ou de tout ce que nous étions censés appeler iOS à cette époque), les fenêtres de navigateur mobile étaient «virtuelles». Bien que la fenêtre ne puisse occuper (par exemple) que 320 pixels de l’espace physique dans l’interface, le navigateur crée une fenêtre “virtuelle” plus large (980 pixels de large par défaut sur iOS, je pense) et y rend son contenu, puis zoomer sur cette fenêtre virtuelle jusqu’à ce qu’elle rentre dans les pixels physiques disponibles sur l’écran de l’appareil.

La balise meta viewport vous permet d’indiquer au navigateur mobile la taille de cette fenêtre virtuelle. Ceci est souvent utile si vous ne modifiez pas réellement la conception de votre site pour mobile, et il rend mieux avec une fenêtre virtuelle plus grande ou plus petite. (Je crois que 980 pixels ont été choisis par défaut car ils ont rendu de nombreux sites très médiatisés en 2007; pour un site donné, une valeur différente pourrait être préférable.)

Personnellement, j’utilise toujours pour que la fenêtre virtuelle corresponde aux dimensions du périphérique. (Notez que initial-scale=1 semble être nécessaire pour que la fenêtre virtuelle s’adapte au mode paysage sur iOS .) Cela fait que les navigateurs mobiles se comportent comme les navigateurs de bureau, ce à quoi je suis habitué.

Sans une balise meta viewport, votre site sera rendu dans la fenêtre virtuelle par défaut du périphérique. Je ne pense pas que ce soit nécessairement un problème, surtout si toutes vos unités sont des ems ou des pourcentages comme vous le dites. Mais cela peut être un peu déroutant si vous devez penser en pixels à tout moment, d’autant plus que différents navigateurs peuvent avoir des fenêtres virtuelles par défaut de tailles différentes. Cela peut également être déroutant pour les responsables ultérieurs s’ils ne comprennent pas l’approche.

J’imagine que vous définissez votre taille de police de base assez grande, de sorte qu’elle soit lisible? Pourriez-vous créer un lien vers l’un des sites Web que vous avez créés comme ça, afin que nous puissions voir un exemple?

Sans viewport, votre appareil utilise une fenêtre virtuelle qui, par défaut, est une version avec zoom arrière de votre site Web, soit environ 980 px sur iPhone et 800px sur andriod. Dès que vous définissez la fenêtre d’affichage et désactivez ce zoom arrière, l’appareil traite le site Web comme il se doit et mesure environ 480 pixels de largeur ou 320 pixels selon l’appareil et l’orientation, etc.

La ressource complète ci-dessous, mon conseil est que chaque fois que vous travaillez avec responsive & mobile, définissez toujours la fenêtre en premier. C’est le meilleur moyen de normaliser le zoom de l’appareil et de s’assurer que votre site est affiché en utilisant une largeur de périphérique réelle, par opposition aux largeurs virtuelles.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

Donc, pour répondre à ma propre question. Ce n’est pas nécessaire.

Vous pouvez utiliser des requêtes multimédia de largeur min et max pour personnaliser la version du bureau à des points d’arrêt spécifiques.

Vous mettez ensuite à jour principalement la taille de la police et d’autres propriétés spécifiquement pour les tablettes et les téléphones. Comme je l’ai dit, cela augmente principalement la taille de la police pour la lisibilité.

Cette méthode a cependant un problème majeur de maintenabilité.

La balise meta viewport vous permet d’utiliser simplement max et min-width, qui vont du bureau aux appareils mobiles.

Pas pour tous les appareils, mais oui pour les mobiles. Les navigateurs mobiles affichent les pages dans une “fenêtre” virtuelle, la fenêtre d’affichage étant généralement plus large que l’écran, ils n’ont donc pas besoin de placer chaque mise en page dans une petite fenêtre (par conséquent, certains sites et utilisateurs non optimisés pour mobile doivent Zoom). Mobile Safari a introduit la “balise meta viewport” pour permettre aux développeurs Web de contrôler la taille et l’échelle de la fenêtre. Maintenant, tous les navigateurs mobiles prennent en charge cette balise même si elle ne fait partie d’aucune norme Web . Un site typique optimisé pour les mobiles doit contenir la balise suivante:

  

La propriété width contrôle la taille de la fenêtre d’affichage. Largeur de l’écran en pixels CSS à une échelle de 100%. La propriété initial-scale contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés d’échelle maximale, d’échelle minimale et d’évolutivité utilisateur contrôlent la manière dont les utilisateurs sont autorisés à effectuer un zoom avant ou arrière sur la page.

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19

Vous devriez certainement utiliser les balises viewport , car elles ont la capacité de rendre la vie des développeurs Web infiniment plus simple. Ils vous permettent de contrôler facilement les dimensions de rendu exactes et / ou les niveaux de zoom de N’IMPORTE QUEL écran (même sur le bureau si vous le souhaitez). Cela rend la construction d’un site Web pour n’importe quel appareil un morceau de gâteau. Mais sachez qu’avec un grand pouvoir vient une grande responsabilité. Utilisez cette puissance judicieusement (et ne pas DÉSACTIVER le zoom).

Vous pouvez toujours utiliser la méta-balise viewport pour optimiser la résolution de la vue du périphérique et permettre à l’utilisateur de zoomer:

  

Avec une échelle maximum définie, vous pouvez contrôler la façon dont l’utilisateur le zoome. Je pense que nous devrions avoir cette option activée car même avec un site Web réactif, je souhaite zoomer, cela apprend déjà que c’est tellement intuitif que cela devient une attente.

Oui, c’est une balise nécessaire pour développer des sites réactifs. Cependant, l’utilisation de l’étiquette seule ne vous aidera pas, mais elle facilite le développement de sites réactifs en vous permettant de contrôler la taille du contenu visible de votre page Web. .