La balise méta de la fenêtre d'affichage est-elle vraiment nécessaire?
J'ai créé quelques sites responsive, mais je suis plutôt novice dans le développement de sites responsive. Dans mon CSS, 99% de mes valeurs sont exprimées en ems ou en pourcentages. J'utilise des requêtes de support (max-width et max-device-width) pour modifier la mise en page. Je n'ai pas inclus de méta-tag de 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.
Ajouter une balise META casse mon site. Est-ce que je fais quelque chose de mal ou que je fais quelque chose de bien pour ne pas avoir à l'inclure? Je ne comprends pas pourquoi cela semble être une pratique exemplaire, car cela me casse la main.
Est-ce que je manque quelque chose?
Sur les systèmes d'exploitation de bureau, les fenêtres de navigateur ont un nombre fixe de pixels de large et le contenu des pages Web est restitué tel quel.
À partir de Safari sur iOS (ou de ce que nous étions censés appeler iOS à l'époque), les fenêtres de visualisation de navigateur mobile étaient «virtuelles». Bien que la fenêtre d'affichage ne puisse occuper que 320 pixels physiques (par exemple), le navigateur crée une fenêtre "virtuelle" plus grande (980 pixels de large par défaut sur iOS, je pense) et affiche le contenu à l'intérieur, puis effectue un zoom sur la fenêtre d'affichage virtuelle jusqu'à ce qu'elle s'intègre dans les pixels physiques réels disponibles sur l'écran du périphérique.
La balise méta de la fenêtre d'affichage vous permet d'indiquer au navigateur mobile la taille de cette fenêtre virtuelle. Cela est souvent utile si vous ne modifiez pas réellement la conception de votre site pour les appareils mobiles et si le rendu est meilleur avec une fenêtre d'affichage virtuelle plus grande ou plus petite. (Je pense que 980 pixels a été choisi par défaut car il permettait de restituer de nombreux sites de premier plan en 2007; pour un site donné, une valeur différente pourrait être meilleure.)
Personnellement, j'utilise toujours <meta name="viewport" content="width=device-width, initial-scale=1"> pour que la fenêtre d'affichage virtuelle corresponde aux dimensions du périphérique. (Notez que initial-scale=1 semble être nécessaire pour adapter la fenêtre d'affichage virtuelle au mode paysage sur iOS .) Cela oblige les navigateurs mobiles à se comporter comme les navigateurs de bureau, ce à quoi je suis habitué.
Sans balise méta de fenêtre d'affichage, votre site sera rendu dans la fenêtre d'affichage 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 il peut être un peu déroutant de penser à tout moment en pixels, d'autant plus que différents navigateurs peuvent avoir des fenêtres de visualisation virtuelles par défaut de tailles différentes. Cela pourrait également être déroutant pour les mainteneurs suivants s'ils ne comprennent pas l'approche.
J'imagine que vous définissez une taille de police de base assez grande pour qu'elle soit lisible? Pourriez-vous créer un lien vers l'un des sites Web que vous avez créé comme celui-ci afin que nous puissions voir un exemple?
Donc, pour répondre à ma propre question. Ce n'est pas nécessaire.
Vous pouvez utiliser des requêtes multimédias de largeur minimale et maximale pour styliser la version de bureau à des points d'arrêt spécifiques.
Vous mettez ensuite à jour principalement les propriétés de taille de police et autres, spécialement pour les tablettes et les téléphones. Comme je l'ai dit, cela augmente principalement la taille de la police pour plus de lisibilité.
Cette méthode a cependant un problème majeur de maintenabilité.
La balise méta de la fenêtre d'affichage vous permet d'utiliser simplement les largeurs max et min qui s'étendent du bureau aux appareils mobiles.
Sans fenêtre d'affichage, votre appareil utilise une fenêtre d'affichage virtuelle qui est par défaut une version zoomée de votre site Web, soit environ 980 pixels sur iPhone et 800 pixels sur andriod. Dès que vous définissez la fenêtre et désactivez ce zoom arrière, l'appareil traite le site Web comme il se doit et mesure environ 480px de large ou 320px en fonction de l'appareil et de l'orientation, etc.
La ressource complète ci-dessous, mon conseil est que chaque fois que vous travaillez avec responsive & mobile, configurez toujours la fenêtre d'affichage en premier. C'est le meilleur moyen de normaliser le zoom de l'appareil et de vous assurer que votre site est affiché en utilisant la largeur réelle de l'appareil, par opposition à toute largeur virtuelle.
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
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 généralement plus large que l'écran, de sorte qu'elles n'ont pas besoin de compresser chaque mise en page dans une petite fenêtre certains sites non optimisés pour la téléphonie mobile et les utilisateurs doivent zoomer). Mobile Safari a introduit la "balise méta viewport" pour permettre aux développeurs Web de contrôler la taille et l’échelle de la fenêtre. Désormais, tous les navigateurs mobiles prennent en charge cette balise même si elle ne fait ne fait partie d'aucun standard Web . Un site typique optimisé pour les mobiles devrait contenir la balise suivante:
<meta name="viewport" content="width=device-width, initial-scale=1">
La propriété width contrôle la taille de la fenêtre. 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 scale-maximum, minimum-scale et scalable par l'utilisateur contrôlent la manière dont les utilisateurs sont autorisés à agrandir ou réduire la page.
Vous devez absolument utiliser les balises viewport, car elles permettent 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 TOUT écran (même sur desktop 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’un grand pouvoir entraîne de grandes responsabilités. Utilisez cette puissance à bon escient (et ne désactivez pas le zoom).
Vous pouvez toujours utiliser la métabalise de la fenêtre d'affichage pour optimiser la résolution de la vue de l'appareil et permettre à l'utilisateur de zoomer:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">
Avec une échelle maximale définie, vous pouvez contrôler le mode de zoom de l'utilisateur. Je pense que nous devrions activer cette option car même avec un site Web réactif que je souhaite agrandir, il apprend que déjà, c’est tellement intuitif que cela devient une attente.
Oui, c'est une balise nécessaire pour développer des sites responsive. Cependant, son utilisation seule ne vous aidera pas à le faire, mais elle facilite certainement le développement de sites réactifs en vous permettant de contrôler la taille du contenu visible de votre page Web .
Pour ceux qui doutent, le moyen le plus simple est de tester sans elle. Je l'ai fait et suis parvenu à une résolution rapide - si je devais garder une seule balise méta, ce serait celle-ci (au dessus de 'description' et ainsi de suite). En fait, si je devais choisir entre celui-ci et tous les autres, je donnerais tout. Juste le tester!