Quel est le rôle de l'attribut méta de la fenêtre d'affichage de la fenêtre rétractable?
J'ai du mal à trouver de la documentation pour cela. Est-ce spécifique à Safari?
Il y avait un bogue récent dans iOS 9 ( here ), la solution consiste à ajouter shrink-to-fit=no à la méta de viewport.
Que fait ce code?
Il est spécifique à Safari, du moins au moment de la rédaction, introduit dans Safari 9.0. De la "Quoi de neuf dans Safari?" documentation pour Safari 9. :
Modifications de la fenêtre d'affichage
Les balises méta de la fenêtre de visualisation utilisant
"width=device-width"permettent à la page de s’adapter à un contenu dépassant les limites de la fenêtre. Vous pouvez remplacer ce comportement en ajoutant"shrink-to-fit=no"à votre balise META, comme indiqué ci-dessous. La valeur ajoutée empêchera la page de s’adapter à la fenêtre.
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
En bref, l’ajouter à la balise méta de la fenêtre de visualisation restaure le comportement antérieur à Safari 9.0.
Exemple
Voici un exemple visuel travaillé qui montre la différence lors du chargement de la page dans les deux configurations.
La section rouge correspond à la largeur de la fenêtre et la section bleue se trouve en dehors de la fenêtre initiale (par exemple, left: 100vw). Notez comment, dans le premier exemple, la page est agrandie lorsque shrink-to-fit=no est omis (ce qui montre le contenu non affiché) et le contenu bleu reste en dehors de l'écran dans le dernier exemple.
Le code de cet exemple est disponible sur https://codepen.io/davidjb/pen/ENGqpv .
Sans rétrécissement à l'ajustement spécifié
Avec shrink-to-fit = no
En tant que statistiques sur l'utilisation d'iOS, indiquant que l'utilisation d'iOS 9.0-9.2.x est actuellement de 0,17%. Si ces chiffres sont vraiment révélateurs de l’utilisation globale de ces versions, il est encore plus probable que vous supprimiez de manière appropriée la restriction de la taille de votre méta-tag viewport.
Après 9.2.x. IOS supprime cette vérification de balise sur son navigateur.
Vous pouvez consulter cette page https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html