Existe-t-il un moyen non hacky pour empêcher le pincement du zoom sur iOS 11.3 Safari?
Je vraiment je veux désactiver le pincement pour zoomer sur mes pages Web (iframes) et utiliser les événements de pincement des doigts pour une autre interaction personnalisée. Ainsi, bien que Safari selon leur documentation indique qu'il prend en charge la clause suivante:
<meta name="viewport" content="width=device-width, user-scalable=no" />
… Dans la pratique, Safari ne l'honore pas.
La possibilité d'empêcher le zoom de la fenêtre est généralement importante pour l'expérience de jeu sur le Web et pour une expérience utilisateur plus étroite autour des boutons, des zones de saisie et des interfaces de type glissement/dézoom, même des vidéos, tout en restant un bon réglage par défaut pour les lecteurs malvoyants. Il existe également un mode reader simplifié sur iOS Safari qui permet une lecture épurée avec les fonctionnalités d'accessibilité souhaitées.
À mon humble avis, l'application du principe d'accessibilité destiné aux lecteurs de basse vision sur chaque cas d'utilisation du Web est draconienne. Il est possible de corriger le pincement du zoom à l'aide des écouteurs d'événements passive, mais pour des raisons d'hygiène, la question est: existe-t-il une manière non hacky de le faire?
Dans un discussion récente avec l'équipe du W3C/WCAG, il a été précisé (soulignement le mien) que les directives d'accessibilité spécifient uniquement…
une NE DEVRAIT PAS créer d'exigence de conformité qui figure dans la spécification depuis 2016 arronei/html @ 877b59c. Il s'agit uniquement d'une exigence de conformité de l'auteur, qui n'interdit pas l'utilisation mais demande aux auteurs de considérer sérieusement la limitation de la capacité de l'utilisateur à zoomer. Ce que Apple a fait en safari est au-delà de la portée de ce problème car il ne nécessite rien des implémenteurs de navigateur.
Avec les récents changements sur iOS Safari, Apple semble avoir plié les directives d'accessibilité vers un CANNOT author conformance exigence à la place pour des raisons qui leur sont inconnues. Il est important que cette différence entre les spécifications et la mise en œuvre soit mise en évidence ici pour mémoire.
Suite à des discussions avec l'équipe Apple iOS Safari, un bug a été déposé avec le webkit pour ce problème de conformité ici .
Bien qu'il n'y ait pas de moyen non hacky d'empêcher pinchzoom, il existe toujours un hack qui fonctionne sur iOS 11.3 Safari. Au moins pour l'instant. Voir inobounce qui gère à la fois le comportement de l'élastique et le pincement en un seul balayage.
De Comment désactiver le zoom de la fenêtre d'affichage sur Mobile Safari?
Essayez d'ajouter ce qui suit à votre head-tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
aditionellement
<meta name="HandheldFriendly" content="true">
Enfin, soit en tant qu'attribut de style, soit dans votre fichier css, ajoutez le texte suivant pour les navigateurs Webkit:
html {
-webkit-text-size-adjust: none
}