Explication détaillée de la solution de jQuery au problème de mise à l'échelle des versions supérieures à iOS10

Comment résoudre le problème de mise à l'échelle sur iOS 10 et supérieur ? Cet article utilise un exemple de code pour vous présenter comment résoudre le problème de mise à l'échelle d'iOS10 et supérieur basé sur jQuery. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Le code spécifique est le suivant :

<script type="text/javascript">
    /*解决ios10以上版本缩放问题 20171102*/
    window.onload=function () { 
    document.addEventListener('touchstart',function (event) { 
      if(event.touches.length>1){ 
        event.preventDefault(); 
      } 
    }) 
    var lastTouchEnd=0; 
    document.addEventListener('touchend',function (event) { 
      var now=(new Date()).getTime(); 
      if(now-lastTouchEnd<=300){ 
        event.preventDefault(); 
      } 
      lastTouchEnd=now; 
    },false) 
  } 
    </script>

Supplémentaire : Jetons un coup d'œil à la page qui interdit aux utilisateurs de zoomer dans iOS10

Avant iOS10, nous pouvons interdire les utilisateurs de zoomer en définissant la page méta :

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

Le paramètre méta n'est pas valide dans le système iOS10 :

Afin d'améliorer l'accessibilité du site Web dans Safari, même si le site Web définit l'utilisateur -scalable = non dans la fenêtre, l'utilisateur peut être mis à l'échelle manuellement.

Solution : Écoutez les événements à prévenir

window.onload=function () { 
    document.addEventListener('touchstart',function (event) { 
      if(event.touches.length>1){ 
        event.preventDefault(); 
      } 
    }) 
    var lastTouchEnd=0; 
    document.addEventListener('touchend',function (event) { 
      var now=(new Date()).getTime(); 
      if(now-lastTouchEnd<=300){ 
        event.preventDefault(); 
      } 
      lastTouchEnd=now; 
    },false) 
  }

Recommandations associées :

Python génère des icônes et des captures d'écran pour iOS10

Comment utiliser CSS pour redimensionner automatiquement la hauteur de l'image

Explication détaillée de la solution au problème de mise à l'échelle de la page mobile HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!