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

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

转载自掘金-互联网学徒

移动端web缩放有两种:

双击缩放

双指手势缩放

在 iOS 10之前,iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放:

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

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

window.οnlοad=function() {

document.addEventListener('touchstart',function(event) {if(event.touches.length>1){

event.preventDefault();

}

})var lastTouchEnd=0;

document.addEventListener('touchend',function(event) {var now=(newDate()).getTime();if(now-lastTouchEnd<=300){

event.preventDefault();

}

lastTouchEnd=now;

},false)

}

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

6c1555302777729326ca3efa0910d9ec.png

原来在 iOS 里有一组双指手势操作的事件:gesturestart、gesturechange、gestureend

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

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

event.preventDefault();

});

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

完整代码

window.onload = function() {//阻止双击放大

var lastTouchEnd = 0;

document.addEventListener('touchstart', function(event) {if (event.touches.length > 1) {

event.preventDefault();

}

});

document.addEventListener('touchend', function(event) {var now = (newDate()).getTime();if (now - lastTouchEnd <= 300) {

event.preventDefault();

}

lastTouchEnd=now;

},false);//阻止双指放大

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

event.preventDefault();

});

}

这样就OK了,安排!

6c1555302777729326ca3efa0910d9ec.png

来源:https://www.cnblogs.com/mica/p/10848817.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/460884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SCRT软件的使用教程

以下内容源于网络资源的学习与整理&#xff0c;如有侵权请告知删除。 SCRT软件下载&#xff1a;提取码1234 快速链接的步骤与设置 先选择“快速链接”&#xff1b; 然后协议选serial&#xff0c;端口在设备管理器中查看&#xff08;我的是com3&#xff09;&#xff0c;波特率…

KEIL4.12中添加ULINK2的支持

转载自&#xff1a;http://www.amobbs.com/thread-4767650-1-1.html 如果你用KEIL4.12&#xff0c;但却没有Ulink2下载器&#xff0c;只有早先用的Ulink下载器&#xff0c;那么你按照下面三步升下级就可以了....三步&#xff1a;1.把‘keil-ulink升级至ulink2的文件’解压缩后拷…

解决Vmware中安装Ubuntu Server 14.04 分辨率无法全屏问题

2019独角兽企业重金招聘Python工程师标准>>> We will have to edit grub configuration. Open a terminal and paste this: sudo gedit /etc/default/grub Hit Enter. It will open grub preferences in Gedit.Locate the line # GRUB_GFXMODE800x600 (resolution m…

GCC编译器的相关内容

本文摘录与整理于C语言中文网的相关内容&#xff0c;仅用于学习&#xff0c;如有侵权请告知删除。 原内容网址&#xff1a;C语言中文网&#xff1a;C语言程序设计门户网站(入门教程、编程软件) GCC官方文档网址&#xff1a;Top (Using the GNU Compiler Collection (GCC)) 1、…

计算机用户登录设置成2000,2008计算机等级考试:Windows2000系统选项设置

在Windows 2000 Server中&#xff0c; 用户除了可以进行前面章节中介绍的系统设置&#xff0c;还可以在系统中进行一些其他的设置&#xff0c;包括新建、编辑、删除用户及系统变量&#xff0c;设置默认启动系统及故障恢复选项&#xff0c;查看系统性能等。本节便来介绍一些比较…

成都电讯学院研发的计算机,成都电讯工程学院

[拼音]&#xff1a;chengdu dianxun gongcheng xueyuan[外文]&#xff1a;Chengdu Institute of Telecommunication中国一所以培养电子科学技术人才为主的多科性理工科高等学校。1956年9月创建于四川成都。建院初仅设4个专业。1984年&#xff0c;学校设12个系(26个专业)&#x…

Linux系统以源码方式安装软件的方法

以下内容源于网络资源的整理&#xff0c;如有侵权请告知删除。 Linux系统中安装软件的三种方法_馨若梦的博客-CSDN博客_linux怎么安装软件 Linux下源码编译安装详解_Zebul博的博客-CSDN博客_编译安装 Linux源码包的一般安装步骤_Kaiattrib的博客-CSDN博客_linux源码包安装步…

hdu4565之矩阵快速幂

So Easy! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 813 Accepted Submission(s): 226 Problem Description A sequence S n is defined as: Where a, b, n, m are positive integers.┌x┐is the ceil …

Red Hat Enterprise Linux Server release 7.0双系统安装

2019独角兽企业重金招聘Python工程师标准>>> Red Hat Enterprise Linux Server release 7.0双系统安装 1.RedHat 公司的企业版7.0已经发布了。下面介绍一下在7.0下装双系统的步骤。 安装前系统&#xff1a;WIN7 要安装的第二个系统:RedHat Enterprise 7.0 请注意&am…

Android的按钮单击事件及监听器的实现方式

2019独角兽企业重金招聘Python工程师标准>>> 第一种&#xff1a;匿名内部类作为事件监听器类 大部分时候&#xff0c;事件处理器都没有什么利用价值&#xff08;可利用代码通常都被抽象成了业务逻辑方法&#xff09;&#xff0c;因此大部分事件监听器只是临时使用一…

Sublime text在Linux下的安装与配置

以下内容源于网络资源的整理&#xff0c;如有侵权请告知删除。文章内容主要整理源&#xff1a;C语言中文网&#xff1a;C语言程序设计门户网站(入门教程、编程软件)。 一、安装Sublime text 安装方法有两种&#xff1a;利用软件包管理工具安装&#xff0c;利用下载好的软件包进…

在Spring中使用JTA事务管理

2019独角兽企业重金招聘Python工程师标准>>> Spring 通过AOP技术可以让我们在脱离EJB的情况下享受声明式事务的丰盛大餐&#xff0c;脱离Java EE应用服务器使用声明式事务的道路已经畅通无阻。但是很大部分人都还认为脱离Java EE应用服务器就无法使用JTA事务&#x…

第一季7:海思的根文件系统的概览与制作

一、根文件系统理论 关于根文件系统的原理&#xff0c;可以参看以下博客。 根文件系统的原理 使用BusyBox制作根文件系统的理论分析 二、海思的根文件系统 1、海思的根文件系统体现在Hi3518E_SDK_V1.0.3.0\package\rootfs_uclibc目录。 而根文件系统大部分工作由etc/init.d/…

第一季8:完整版(即包含mpp)根文件系统的制作

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、概述 mpp是海思编写的与视频编解码有关的驱动、库等内容。我们需要部署这些内容&#xff0c;也就是把这些内容放在合适的目录位置。 二、mpp的目录结构 mpp目录位于Hi3518E_SDK_V1.0.3.0\pack…

计算机三级会保研加分吗,366所高校有保研资格,除了对成绩有要求外,还有哪些要求?...

文&#xff5c;冷丝栏目&#xff5c;考研录取我国本科院校有1000余所&#xff0c;具有保研资格的高校有366所&#xff0c;这些高校也是在不同年份按照不同批次获得保研资格。(本文文末附录全部高校名单)推免制度最初的目的上为了提高招生工作的质量&#xff0c;并且加大培养拔尖…

第一季8:sample_venc.c的编译和测试

注意&#xff0c;以下内容基于前面完整版的根文件系统&#xff0c;因此需要先完成前面的步骤。 1、明确sample文件夹的位置 海思SDK有很多sample&#xff0c;以方便开发人员的参阅。sample文件夹位于/package/mpp/目录下。 其中/package/mpp/sample/venc目录完成了视频的采集以…

计算机电缆 耐火,耐火计算机电缆ZR-NH-DJVVP

耐火计算机电缆ZR-NH-DJVVP低烟无卤阻燃计算机电缆用途&#xff1a;本电缆具有低压电容和低电感&#xff0c;并具有良好屏蔽性能和抗干扰性能&#xff0c;因而防爆性能优于一般计算机电缆和控制电缆&#xff0e;它适用于有防爆要求场合的集散系统和自动化检测控制等要求低烟无卤…

Linux 安装Resin4.0.40

一、Resin简介Resin官网地址&#xff1a;http://caucho.com/ Resin源码包下载地址&#xff1a;http://caucho.com/products/resin/downloadResin是CAUCHO公司的产品&#xff0c;是一个非常流行的支持servlets和jsp的引擎&#xff0c;速度非常快。Resin本身包含了一个支持HTTP/1…

第二季2:视频缓存池的简介

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、视频缓存池的概念 &#xff08;1&#xff09;视频的本质是多帧图片&#xff0c;图片的本质是RGB或rawRGB数据&#xff0c;视频要占用一段连续内存。 &#xff08;2&#xff09;视频的裁剪、缩…

C#中的字符串

1. 值类型与引用类型比较classProgram { staticvoid Main() { int a 9; //给变量a赋值为9 int b a; //将a的副本给变量b b 10; Console.WriteLine(string.Format("a{0},b{1}", a, b)); Person ZS newPerson(); //张三 ZS.Age 99; //张三…