désactiver le zoom de la fenêtre Safari iOS 10+?

J'ai mis à jour mon iPhone 6 plus vers la version bêta d'iOS 10 et je viens de constater que dans Mobile Safari, vous pouvez zoomer sur toutes les pages Web en appuyant deux fois ou en pinçant IGNORER le user-scalable=nocode dans la balise meta. Je ne sais pas si c'est un bug ou une fonctionnalité. Si cela est considéré comme une fonctionnalité, comment désactiver le zoom de la fenêtre Safari iOS 10?

mis à jour sur la version iOS 11/12, les safaris iOS 11 et iOS 12 NE respectent toujours PAS la user-scalable=nobalise meta.

Il est possible d'empêcher la mise à l'échelle de la page Web dans Safari sur iOS 10, mais cela impliquera plus de travail de votre part. Je suppose que l'argument est qu'un certain degré de difficulté devrait empêcher les développeurs du culte de la cargaison de laisser tomber "user-scalable = no" dans chaque balise de la fenêtre et de rendre les choses inutilement difficiles pour les utilisateurs malvoyants.

Néanmoins, j'aimerais voir Apple modifier sa mise en œuvre afin qu'il existe un moyen simple (méta-balise) de désactiver le double-clic pour zoomer. La plupart des difficultés sont liées à cette interaction.

Vous pouvez arrêter le pincement pour zoomer avec quelque chose comme ceci:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

Notez que si des cibles plus profondes appellent stopPropagation sur l'événement, l'événement n'atteindra pas le document et le comportement de mise à l'échelle ne sera pas empêché par cet écouteur.

La désactivation du double-tap-to-zoom est similaire. Vous désactivez tout tap sur le document se produisant dans les 300 millisecondes du tap précédent:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Si vous ne configurez pas correctement vos éléments de formulaire, vous concentrer sur une entrée effectuera un zoom automatique, et comme vous avez principalement désactivé le zoom manuel, il sera désormais presque impossible de dézoomer. Assurez-vous que la taille de la police d'entrée est> = 16px.

Si vous essayez de résoudre cela dans un WKWebView dans une application native, la solution donnée ci-dessus est viable, mais c'est une meilleure solution: https://stackoverflow.com/a/31943976/661418 . Et comme mentionné dans d'autres réponses, dans iOS 10 bêta 6, Apple a maintenant fourni un drapeau pour honorer la balise meta.

Mise à jour de mai 2017: j'ai remplacé l'ancienne méthode de désactivation du zoom par pincement par une approche plus simple de vérification de l'événement à l'échelle sur touchmove. Devrait être plus fiable pour tout le monde.

Il s'agit d'une nouvelle fonctionnalité d'iOS 10.

À partir des notes de version d'iOS 10 bêta 1:

• Pour améliorer l'accessibilité sur les sites Web dans Safari, les utilisateurs peuvent désormais pincer pour zoomer même lorsqu'un site Web est défini user-scalable=nodans la fenêtre d'affichage.

Je pense que nous allons bientôt voir un add-on JS pour désactiver cela d'une manière ou d'une autre.

J'ai pu résoudre ce problème en utilisant la touch-actionpropriété css sur des éléments individuels. Essayez de définir des touch-action: manipulation;éléments sur lesquels on clique généralement, comme des liens ou des boutons.

Il semble que ce comportement soit censé être modifié dans la dernière version bêta, qui au moment de la rédaction est la version bêta 6.

À partir des notes de publication pour iOS 10 bêta 6:

WKWebViewdésormais, par défaut, respecter user-scalable=nodepuis une fenêtre. Les clients de WKWebViewpeuvent améliorer l'accessibilité et permettre aux utilisateurs de pincer pour zoomer sur toutes les pages en définissant la WKWebViewConfiguration propriété ignoresViewportScaleLimitssur YES.

Cependant, dans mes tests (très limités), je ne peux pas encore confirmer que ce soit le cas.

Edit: vérifié, iOS 10 Beta 6 respecte user-scalable=nopar défaut pour moi.

La solution de contournement qui fonctionne dans Mobile Safari au moment de la rédaction consiste à avoir le troisième argument dans addEventListenerbe { passive: false }, donc la solution de contournement complète ressemble à ceci:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

Vous voudrez peut-être vérifier si les options sont prises en charge pour rester rétrocompatibles.

J'ai passé environ une heure à chercher une option javascript plus robuste et je n'en ai pas trouvé. Il se trouve que ces derniers jours, j'ai joué avec hammer.js (Hammer.js est une bibliothèque qui vous permet de manipuler facilement toutes sortes d'événements tactiles) et que j'ai surtout échoué dans ce que j'essayais de faire.

Avec cette mise en garde, et sachant que je ne suis en aucun cas un expert en javascript, c'est une solution que j'ai proposée qui exploite essentiellement hammer.js pour capturer les événements pincer-zoom et double-tap, puis les enregistrer et les supprimer.

Assurez-vous d'inclure hammer.js dans votre page, puis essayez de coller ce javascript quelque part dans la tête:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

J'ai essayé la réponse précédente à propos du pincement pour zoomer

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

Cependant, parfois, l'écran continue de zoomer lorsque event.touches.length> 1 J'ai découvert que le meilleur moyen est d'utiliser l'événement touchmove, pour éviter que le doigt ne bouge sur l'écran. Le code sera quelque chose comme ceci:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

J'espère que cela aidera.

Vérifiez le facteur d'échelle dans l'événement touchove, puis évitez l'événement tactile.

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

Nous pouvons obtenir tout ce que nous voulons en injectant une règle de style et en interceptant les événements de zoom:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ Désactive le zoom par pincement.

✔ Désactive le zoom double-tap.

✔ Le défilement n'est pas affecté.

✔ Désactive la mise en évidence des touches (qui est déclenchée, sur iOS, par la règle de style).

AVIS: ajustez la détection iOS à votre guise. Plus à ce sujet ici .

Toutes mes excuses à lukejackson et Piotr Kowalski , dont les réponses apparaissent sous une forme modifiée dans le code ci-dessus.

J'ai trouvé une solution assez naïve, mais elle semble fonctionner. Mon objectif était d'éviter que les doubles-taps accidentels soient interprétés comme un zoom avant, tout en gardant le pincement pour zoomer pour l'accessibilité.

L'idée est de mesurer le temps entre le premier touchstartet le second touchenden un double tap, puis d'interpréter le dernier touchendcomme un clic si le délai est trop petit. Tout en évitant un zoom accidentel, cette méthode semble ne pas affecter le défilement de la liste, ce qui est bien. Je ne sais pas si je n'ai rien manqué.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

Inspiré par un essentiel de l'hiver mutuel et la réponse de Joseph .

Dans mon cas particulier, j'utilise Babylon.js pour créer une scène 3D et toute ma page se compose d'un canevas plein écran. Le moteur 3D a sa propre fonctionnalité de zoom, mais sur iOS, le zoom par pincement interfère avec cela. J'ai mis à jour la réponse @Joseph pour surmonter mon problème. Pour le désactiver, j'ai compris que je devais passer le {passif: false} comme option à l'écouteur d'événements. Le code suivant fonctionne pour moi:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

Aussi étrange que cela puisse paraître, au moins pour Safari dans iOS 10.2, le double tap pour zoomer est désactivé par magie si votre élément ou l'un de ses ancêtres présente l'un des éléments suivants:

1. Un auditeur onClick - cela peut être un simple noop.
2. Un cursor: pointerensemble en CSS

Un zoom non intentionnel a tendance à se produire lorsque:

• Un utilisateur appuie deux fois sur un composant de l'interface
• Un utilisateur interagit avec la fenêtre en utilisant deux chiffres ou plus (pincement)

Pour éviter le comportement de double tap , j'ai trouvé deux solutions de contournement très simples:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

Ces deux éléments empêchent Safari (iOS 10.3.2) de zoomer sur le bouton. Comme vous pouvez le voir, l'un est uniquement JavaScript, l'autre est uniquement CSS. Utilisez de manière appropriée.

Voici une démo: https://codepen.io/lukejacksonn/pen/QMELXQ

Je n'ai pas (encore) tenté d'empêcher le comportement de pincement, principalement parce que j'ai tendance à ne pas créer d'interfaces multi-touch pour le Web et deuxièmement, je suis venu à l'idée que toutes les interfaces, y compris l'interface utilisateur native de l'application, devraient être "pincées pour zoomer" -able par endroits. Je continuerais de concevoir pour éviter que l'utilisateur n'ait à le faire pour lui rendre votre interface utilisateur accessible à tout prix.

Trouvé ce travail simple autour qui semble empêcher le double-clic pour zoomer:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

Comme demandé, j'ai transféré mon commentaire dans une réponse afin que les gens puissent le voter:

Cela fonctionne 90% du temps pour iOS 13:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

et

<meta name="HandheldFriendly" content="true">

J'ai vérifié toutes les réponses ci-dessus dans la pratique avec ma page sur iOS (iPhone 6, iOS 10.0.2), mais sans succès. Voici ma solution de travail:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

cela a fonctionné pour moi:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);