移动端web缩放有两种:

1.双击缩放;

2.双指手势缩放。

iOS 10以前,iOSAndroid都可以通过一行meta标签来禁止页面缩放

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

iOS 10开始,meta设置在Safari内无效了。

 后来在网上看到一个解决方案:

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)

}

经过测试,这种方法只能禁止双击缩放。只好继续找解决方案了。

原来在iOS里有一组双指手势操作的事件:gesturestartgesturechangegestureend

在上面的js方法里加入下面的事件监听:

document.addEventListener('gesturestart', function (event) {

event.preventDefault();

});

既不能双击缩放,也不能双指缩放。

完整代码:

 <script>

     /*禁止ios缩放,双击和双指*/

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

        document.addEventListener('gesturestart', function (event) {

          event.preventDefault();

        });

      }

    </script>

参考链接:

https://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari

解决ios10及以上Safari双击和双指缩放无法禁止的问题的更多相关文章

  1. 完美解决ios10及以上Safari无法禁止缩放的问题

    移动端web缩放有两种: 1.双击缩放: 2.双指手势缩放. 在iOS 10以前,iOS和Android都可以通过一行meta标签来禁止页面缩放 <meta content="widt ...

  2. 在viewPager中双指缩放图片,双击缩放图片,单指拖拽图片

    我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...

  3. 解决java web中safari浏览器下载后文件中文乱码问题

    解决java web中safari浏览器下载后文件中文乱码问题 String fileName = "测试文件.doc"; String userAgent = request.g ...

  4. 解决ios10以上版本缩放问题

    <script type="text/javascript"> /*解决ios10以上版本缩放问题 20171102*/ window.onload=function ...

  5. 用开源项目PhotoView实现图片的双指缩放和双击放大缩小

    项目地址:https://github.com/chrisbanes/PhotoView 用开源项目有个好处,一是实现简单,二是bug少.那么我们就来说下这个项目能够实现的效果: 1.单个图片的双指缩 ...

  6. ios移动端禁止双指缩放功能

    在实际开发中,我们禁止缩放的实现方式: 1.meta设置: <meta name="viewport"  content="width=device-width,h ...

  7. js实现双指缩放图片 手机端双指缩放图片

    首先引入js文件,需要jq,pinchzoom.js.pinchzoom.js需要在jq环境下使用,可以 <meta name="viewport" content=&quo ...

  8. 微信小程序movable-view移动图片和双指缩放

    先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址:https://mp. ...

  9. 解决iOS10的Safari下Meta设置user-scalable=no无效的方法

    苹果为了提高Safari中网站的辅助功能,屏蔽了Meta下的user-scalable=no功能.所以在iOS10下面,就算加上user-scalable=no,Safari浏览器也能支持手动缩放. ...

随机推荐

  1. hive中分隔符‘\001’到底是什么鬼

    答:hive中的默认的是'\001'是一种特由的分隔符 使用的是ascii编码的值,键盘是打不出来的.

  2. fatal error C1047: 对象或库文件“.\x64\Release\Des.obj”是使用比创建其他对象所用编译器旧的编译器创建的;请重新生成旧的对象和库

    问题描述: 在把一个32位的dll编译成64位的时候提示上面的错误 解决办法: >属性->常规->项目默认值->全程序优化  将这里的默认项 "使用链接时间代码生成& ...

  3. plsql初次连接oracle报错解决方案

    windows7 64bit Oracle win64 11gR2(两个文件) PL/SQL v9.0 详细错误信息 Initialization error Could not initialize ...

  4. Linux操作系统中对于NTFS读取目录功能的实现

    1: /* 2: * We use the same basic approach as the old NTFS driver, i.e. we parse the 3: * index root ...

  5. python3 递归函数return返回None

    今天写了一个函数,执行之后打印出来的结果是None,不明白,之后百度了一下,这里记一下过程,免得之后再踩坑 #!/usr/bin/python3# -*- coding:utf-8 -*- def b ...

  6. js小项目:显示与输入的内容相关的

    1,添加键盘抬起事件 2,获取文本框的内容,是否与数组中的内容匹配 3,创建元素 <!DOCTYPE html> <html lang="en"> < ...

  7. 快速高效学习Java编程在线资源Top 20(转载)

    想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...

  8. 结合Poi实现可读取Excel的文件选择对话框

    第一步:ApachePoi的jar包导全,不全会出现异常. 第二步:写就完事了:此例为读取特定模板的excel,仅供参考,根据实际需求改写. package 自建包; import java.awt. ...

  9. <python练习题>python练习题(常练勿忘)

    学了python,去面试经常出现,某个或某些库不熟悉导则想不起来怎么写,知道思路而写不出来,多半还是不够熟悉,这里就作为熟悉python的地方,多做做题,多思考. 题目1:店铺ID为00000000- ...

  10. [BOI2009]Radio Transmission 无线传输

    题目描述 给你一个字符串,它是由某个字符串不断自我连接形成的. 但是这个字符串是不确定的,现在只想知道它的最短长度是多少. 输入输出格式 输入格式: 第一行给出字符串的长度,1 < L ≤ 1, ...