基于jQuery解决ios10以上版本缩放问题

 更新时间:2017年11月03日 10:52:45   作者:yangzailu1990  
本文通过一段示例代码给大家介绍了基于jQuery解决ios10以上版本缩放问题,非常不错,具有参考借鉴价值,需要的朋友参考下吧

具体代码如下所示:

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

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

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

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

在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+slidereveal实现的面板滑动侧边展出效果

    jQuery+slidereveal实现的面板滑动侧边展出效果

    WEB开发中有时需要在页面上设置一个控制面板,默认是不显示的,当用户有需要时可以通过按钮触发调用面板展示。常见的有页面侧边滑出面板效果。本文将使用jQuery插件并结合实例给大家介绍一下面板滑动展示效果。
    2015-03-03
  • 解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

    解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

    在本篇文章里小编给大家整理了关于解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法,有需要的朋友们可以学习下。
    2019-08-08
  • jQuery内容过滤选择器用法分析

    jQuery内容过滤选择器用法分析

    这篇文章主要介绍了jQuery内容过滤选择器用法,实例分析了:contains()、:has()、:empty()、:parent等内容过滤选择器的使用技巧,需要的朋友可以参考下
    2015-02-02
  • jQuery实现仿美橙互联两级导航菜单的方法

    jQuery实现仿美橙互联两级导航菜单的方法

    这篇文章主要介绍了jQuery实现仿美橙互联两级导航菜单的方法,实例分析了jQuery操作css及setTimeout等实现导航菜单的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 浅谈MVC+EF easyui dataGrid 动态加载分页表格

    浅谈MVC+EF easyui dataGrid 动态加载分页表格

    下面小编就为大家带来一篇浅谈MVC+EF easyui dataGrid 动态加载分页表格。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jQuery动态添加<input type=

    jQuery动态添加<input type="file">

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能
    2016-04-04
  • 在jQuery ajax中按钮button和submit的区别分析

    在jQuery ajax中按钮button和submit的区别分析

    昨天在使用jQuery ajax的post方法进行页面传值,无刷新获取数据展示,弄了半天就是没有效果,看了半天也没有语法错误,最后才终于明白问题出在哪里
    2012-10-10
  • jQuery+CSS实现的table表格行列转置功能示例

    jQuery+CSS实现的table表格行列转置功能示例

    这篇文章主要介绍了jQuery+CSS实现的table表格行列转置功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-01-01
  • 关于jQuery.ajax()的jsonp碰上post详解

    关于jQuery.ajax()的jsonp碰上post详解

    这篇文章主要介绍了关于jQuery.ajax()的jsonp碰上post的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • jQuery多级手风琴菜单实例讲解

    jQuery多级手风琴菜单实例讲解

    这篇文章主要介绍了jQuery实现多级手风琴菜单,菜单效果更有特色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-10-10

最新评论