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


Posted in jQuery onNovember 03, 2017

具体代码如下所示:

<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 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
Vue中正确使用jQuery的方法
Oct 30 #jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
You might like
php 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
在javascript中对于DOM的加强
2013/04/11 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
浅析Python 条件控制语句
2020/07/15 Python
Python如何输出百分比
2020/07/31 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
晨会主持词
2014/03/17 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2014年小学英语教师工作总
2014/12/03 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js