如何使用jQuery解决ios10以上版本缩放问题

这篇文章给大家分享的是有关如何使用jQuery解决ios10以上版本缩放问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联是一家以网络技术公司,为中小企业提供网站维护、成都网站建设、网站设计、网站备案、服务器租用、域名注册、软件开发、小程序制作等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站联系电话:18982081108

具体代码如下所示:


    /*解决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) 
  } 
    

补充:下面看下ios10中禁止用户缩放页面

在ios10前我们能通过设置meta来禁止用户缩放页面:

在ios10系统中meta设置失效了:

为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no,用户也可以手动缩放。

解决方法:监听事件来阻止

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

感谢各位的阅读!关于“如何使用jQuery解决ios10以上版本缩放问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


本文名称:如何使用jQuery解决ios10以上版本缩放问题
本文链接:http://hbruida.cn/article/pscdgc.html