Heim > Artikel > Web-Frontend > 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!