基于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以上版本缩放问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 解决IE7中使用jQuery动态操作name问题

    解决IE7中使用jQuery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就不能调试,就不能知道改了后还会不会有这样的问题. 想想可能与客户环境唯一不同就只有可能是js缓存问题了,然后把所有的js文件引用的地方都加上一个当前时间参数,然问题依然存在. 本来规定的版本就是IE8,所以也没有想过会有版本兼容问题,在说了咱用的是jquery,jqeruy的出现不就是号称为了解决浏

  • 详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法

    俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return.基本的逻辑剥离出来是这样的: function getData1(){ var result; $.ajax({ url : 'p.php', async : false, success: functi

  • 关于JS与jQuery中的文档加载问题

    jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$(function),   而js却不行必须全部写完. 2.同时js的window.onload()只能有一个,而jquery的$(document).ready()却可以有多个. 3.最重要的一点是window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.   $(documen

  • 20个最常见的jQuery面试问题及答案

    毫无疑问,jQuery给了JavaScript急需的提振,这是一门如此有用,但同时总是常常被低估的语言. 在 jQuery 粉墨登场之前,我们曾经会写出冗长的JavaScript代码,不仅仅为更大型的应用程序,有时即使是更小的应用程序也要如此. 那种代码常常是既难以阅读又难以维护的. 在使用这个优秀的库之前写过原生的JavaScript,仅仅在用过它的一个月之后,我就能意识到jQuery的真正力量. 鉴于它的巨大人气,有关jQuery的面试问题,以及有关HTML和JavaScript的数量在任何

  • jQuery选择器特殊字符与属性空格问题

    一.选择器中含有特殊符号的注意事项 1．选择器中含有"."."#"."("或"]"等特殊字符 根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. <div id="id#b">bb</div> <

  • 解决JQuery全选/反选第二次失效的问题

    解决JQuery全选/反选第二次失效的问题

    最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了. 原代码大致结构关键如下: function selectAll(obj){ $('input[name="xxx[]"]').attr("checked",obj.checked); } <input type="checkbox" id="mother" name="

  • jQuery常见面试题之DOM操作详析

    jQuery常见面试题之DOM操作详析

    前言 关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了. 面试题一:JQ中html().text()和val()区别? 面试题二:JQ中find().has()和filter()区别? 面试题三: closet()和parents()区别? 答案请在文中查找... DOM操作有三类:DOM-core.HTML-DOM .CSS-DOM 一.插入节点 我们用的最多的就是append和apendTo,其实共有8种方法. 插入节点 二.删

  • 基于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; do

  • vue 解决IOS10低版本白屏的问题

    vue 解决IOS10低版本白屏的问题

    新公司是做自己的独立产品,比之前呆过的外包公司要求严格的多,注重用户体验,以下是在新项目里进行前端优化的一些操作 一,低版本空白屏问题,以及ios8的样式问题 本项目是通过vue-cli搭建,上线以后运行在新版本的苹果手机和安卓手机上均无问题.但是在ios8 9上出现了空白屏的原理,经过测试以后发现是低版本不兼容es6的语法,经过几番尝试找到了最优解. 1 空白屏问题 首先安装babel-polyfill,安装命令:npm install --save-dev babel-polyfill 安装

  • 基于Jquery 解决Ajax请求的页面 浏览器后退前进功能，页面刷新功能实效问题

    需要使用的 jquery.history.js插件 在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求.发现浏览器的刷新,后退,前进按钮失效.于是乎google了一下.发现了一些解决方法.其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求. 换另外一个插件测试下,完美达到我的要求. 总的思路,在url上加上参数,一切工作基于这个参数完成. 复制代码 代码如下: //截取传入字符串中第一次出

  • 基于jquery实现漂亮的动态信息提示效果

    基于jquery实现漂亮的动态信息提示效果

    简单,漂亮,动画效果,用户体验好! 这个效果是在页面头部出现的,出现一下会自动隐藏,上面有x那个提示就要手动关闭一下,其他的都是自动隐藏的! 温馨提示:基于jquery 1.6.2 版本! 复制代码 代码如下: <div id="message-dock"> <div id="message-sleeve" class="group"> <p><span class="sprite messag

  • viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • 基于Jquery.history解决ajax的前进后退问题

    以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文. 本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决. 网上已经有了js的开源解决方案pushState.详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用. 我使用的是  jquery.history.js  可以参考这个

  • jQuery基于随机数解决中午吃什么去哪吃问题示例

    jQuery基于随机数解决中午吃什么去哪吃问题示例

    本文实例讲述了jQuery基于随机数解决中午吃什么去哪吃问题.分享给大家供大家参考,具体如下: 一个解决中午吃什么去哪吃的程序 这下不用每天都纠结吃什么了! 代码功能类似于前面一篇<jQuery实现的老虎机跑动效果>,很有意思 例一: <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style

  • 基于jquery trigger函数无法触发a标签的两种解决方法

    起因:点击icon图标后要触发a标签的链接转跳动作,但是用 JQ 的 $('#a').trigger('click') 居然不起作用,遂百度之,总结两种方法如下: (原因:JQ 的 trigger() 方法确实无法触发 a 标签的转跳动作.) 1:JQ 方法: 对目标 a 标签内部新增一个 span 标签 ,然后给 span 标签绑定 trigger('click') 事件. $('#a').html('<span></span>').children().trigger('cli

  • 基于jquery实现等比缩放图片

    基于jquery的图片尺寸调整 resize.js 复制代码 代码如下: $(window).bind("load", function() {     // IMAGE RESIZE     $('#product_list img').each(function() {         var maxWidth = 120;         var maxHeight = 120;         var ratio = 0;         var width = $(this)

随机推荐