Detaillierte Erläuterung der jQuery-Lösung für das Skalierungsproblem von Versionen über ios10

Wie löst man das Skalierungsproblem auf iOS10 und höher? In diesem Artikel wird ein Beispielcode verwendet, um Ihnen vorzustellen, wie Sie das Skalierungsproblem von iOS 10 und höher basierend auf jQuery lösen können. Freunde, die es benötigen, können darauf verweisen.

Der spezifische Code lautet wie folgt:

<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>

Zusätzlich: Werfen wir einen Blick auf die Seite, die Benutzern das Zoomen in ios10 verbietet

Vor ios10 können wir es verbieten Benutzer können das Zoomen verhindern, indem sie die Metaseite festlegen:

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

Die Metaeinstellung ist im iOS10-System ungültig:

Um die Zugänglichkeit der Website in Safari zu verbessern, auch wenn die Website Benutzereinstellungen vornimmt -scalable = nein im Ansichtsfenster, der Benutzer kann manuell skaliert werden.

Lösung: Auf Ereignisse achten, um sie zu verhindern

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) 
  }

Verwandte Empfehlungen:

Python generiert Symbole und Screenshots für iOS10

So verwenden Sie CSS, um die Bildhöhe automatisch zu skalieren

Detaillierte Erklärung, wie Sie das Skalierungsproblem einer mobilen HTML5-Seite lösen können

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Lösung für das Skalierungsproblem von Versionen über ios10. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!