À quoi sert l'attribut méta de la fenêtre Réduire pour ajuster?

143

J'ai du mal à trouver de la documentation pour cela. Est-ce spécifique à Safari?

Il y a eu un bogue récent dans iOS 9 ( ici ), dont la solution est d'ajouter shrink-to-fit=noà la méta de la fenêtre d'affichage.

Que fait ce code?

html safari webkit ios9 viewport 755
la source

Réponses:

193

Il est spécifique à Safari, du moins au moment de la rédaction de cet article, introduit dans Safari 9.0. À partir de "Quoi de neuf dans Safari?" documentation pour Safari 9.0 :

Modifications de la fenêtre

Les balises Meta Viewport "width=device-width"entraînent une réduction de la page pour s'adapter au contenu qui dépasse les limites de la fenêtre. Vous pouvez remplacer ce comportement en l'ajoutant "shrink-to-fit=no"à votre balise Meta comme indiqué ci-dessous. La valeur ajoutée empêchera la page de se mettre à l'échelle pour s'adapter à la fenêtre.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

En bref, l'ajout de cela à la balise Meta de la fenêtre 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 est positionnée à l'extérieur de la fenêtre initiale (par exemple left: 100vw). Notez comment, dans le premier exemple, la page est agrandie pour s'adapter lorsqu'elle shrink-to-fit=noest omise (montrant ainsi le contenu hors fenêtre) et le contenu bleu reste hors de l'écran dans le dernier exemple.

Le code de cet exemple se trouve à l' adresse https://codepen.io/davidjb/pen/ENGqpv .

Sans rétrécissement spécifié

Sans rétrécissement = non

Avec rétrécissement = non

Avec rétrécissement = non

Davidjb
la source
2
Je suis désolé, mais je ne comprends toujours pas ce que fait ce code. Pouvez-vous expliquer d'une manière différente? Merci!
Daniel Springer
3
@Dani Par défaut, Safari effectuera un zoom arrière sur une page pour l'adapter à tout contenu qui déborde de la fenêtre (le premier exemple montre la zone bleue comme visible; qui déborde). La spécification shrink-to-fit=noempêche ce comportement, laissant le niveau de zoom seul et laissant le contenu débordant hors de l'écran. Essayez l'exemple Codepen sur votre iDevice (ou iOS Simulator) et essayez de modifier le paramètre. Peut-être que voir le changement de manière interactive vous aidera.
davidjb
2
Ah, je vois. Mais pourquoi quelqu'un voudrait-il qu'une partie de son contenu soit cachée sur des écrans plus petits?
Daniel Springer du
7
@Dani Diverses raisons, mais des exemples rapides sont des curseurs / carrousels qui placent le contenu en dehors de la fenêtre d'affichage, ou du contenu non réactif de grande taille (par exemple, des images / tableaux) qui autrement déborderaient et feraient en sorte que le reste de la page devienne minuscule avec la valeur par défaut shrink-to-fitcomportement. Avec shrink-to-fit=no, la page reste à la taille attendue, laissant le contenu déborder de la fenêtre. Un utilisateur peut (généralement) toujours faire défiler ou effectuer un zoom arrière pour voir le contenu de débordement, mais la fenêtre initiale correspond à la taille de l'appareil.
davidjb
2
@davidjb Je pense que cela a été corrigé avec le dernier iOS 11. Je ne parviens pas à reproduire ce bogue.
Zeel Shah
12

Comme 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 indicatifs de l'utilisation globale de ces versions, il est encore plus probable qu'il soit plus sûr de supprimer le rétrécissement à l'ajustement de votre balise Meta 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

GGGin
la source