在实际开发中,我们禁止缩放的实现方式:

1.meta设置:

<meta name="viewport"  content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> ,user-scalabel=no或者user-scalabel=yes(yes是可以缩放,no或者0是不能缩放)

在ios10以上的系统中,并不支持meta标签,需要我们通过脚本实现:

window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
注意:禁用双指缩放后,scroll事件需要重新绑定,滚动条的事件监听touchmove,touchstart,touchend;
 

ios移动端禁止双指缩放功能的更多相关文章

  1. 解决ios10及以上Safari双击和双指缩放无法禁止的问题

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

  2. iOS开发UI篇—UIScrollView控件实现图片缩放功能

    iOS开发UI篇—UIScrollView控件实现图片缩放功能 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对 ...

  3. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

  4. iOS UI-UIScrollView控件实现图片缩放功能

    一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对其内容进行缩放处理.也就是说,要完成缩放功能的话,只需要将需要缩 ...

  5. 【原】移动web资源整理(安卓、ios移动端兼容性问题归整)

     meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wi ...

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

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

  7. 微信浏览器返回刷新,监听微信浏览器返回事件,网页防复制,移动端禁止图片长按和vivo手机点击img标签放大图片

    以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

  8. javascript移动端禁止页面滑动的解决方案

    1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...

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

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

随机推荐

  1. innodb 源码分析 --锁

    innodb引擎中的锁分两种 1)针对数据结构, 如链表 互斥锁 读写锁 http://mysqllover.com/?p=425 http://www.cnblogs.com/justfortast ...

  2. OS之进程管理---进程调度和多线程调度

    进程调度基本概念 多道程序的目标就是始终允许某个进程运行以最大化CPU利用率,多个进程通时存在于内存中,操作系统通过进程调度程序按特定的调度算法来调度就绪队列中的进程到CPU,从而最大限度的利用CPU ...

  3. 递归、字节流、文件复制_DAY20

    1:递归(理解) (1)方法定义中调用方法本身的现象. (2)递归注意事项: A:要有出口,否则就是死递归. B:次数不能太多,否则内存溢出. 特殊事项:构造方法不能递归定义. 例子:cn.itcas ...

  4. (转)Linux Shell系列教程之(十四) Shell Select教程

    本文属于<Linux Shell 系列教程>文章系列,该系列共包括以下 18 部分: Linux Shell系列教程之(一)Shell简介 Linux Shell系列教程之(二)第一个Sh ...

  5. @JsonView注解的使用

    看到一个新的注解以前没有用过,记录一下使用方法. 注意是:com.fasterxml.jackson.annotation.JsonView @JsonView可以过滤pojo的属性,使Control ...

  6. 使用webpack打包js文件(隔行变色案例)

    使用webpack打包js文件(隔行变色案例) 1.webpack安装的两种方式 运行npm i webpack -g全局安装webpack,这样就能在全局使用webpack的命令 在项目根目录中运行 ...

  7. wp 自定义分页函数

    function kerui_pagination($query_string){ global $posts_per_page, $paged; $my_query = new WP_Query($ ...

  8. javascript技巧总结

    1.删除前后空格 String.prototype.trim = function () { return this.replace(/(^[ | ])|([ | ]$)/g, "" ...

  9. golang-利用反射给结构体赋值

    由于想给一个结构体的部分成员赋值,但是有不知道具体名字,故将tag的json名字作为索引,按照json名字来一一赋值 1.通过tag反射//将结构体里的成员按照json名字来赋值 func SetSt ...

  10. springweb flux 服务器推送事件

    以前做服务器推送一般用轮询,后端主动给客户端推送不是很好解决.有时候也可以采用websocket 现在看了springwebflux,用它自带的方法做服务器推送方便多了. 代码如下: import o ...