Detailed explanation of jQuery's solution to the scaling problem of versions above ios10

How to solve the scaling problem of ios10 and above? This article uses a sample code to introduce to you how to solve the scaling problem of iOS10 and above based on jQuery. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

The specific code is as follows:

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

Additional: Let’s take a look at the page that prohibits users from zooming in ios10

Before ios10, we can prohibit users from zooming the page by setting meta:

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

The meta setting is invalid in the ios10 system:

In order to improve the accessibility of websites in Safari, users can manually zoom even if the website has user-scalable = no set in the viewport.

Solution: Listen to events to prevent

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

Related recommendations:

Python generates icons and screenshots for iOS10

How to use CSS to automatically scale the image height

Detailed solution to the scaling problem of html5 mobile page

The above is the detailed content of Detailed explanation of jQuery's solution to the scaling problem of versions above ios10. For more information, please follow other related articles on the PHP Chinese website!