完美解决ios10及以上Safari无法禁止缩放的问题
移动端web缩放有两种:
1.双击缩放;
2.双指手势缩放。
在iOS 10以前,iOS和Android都可以通过一行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>){
event.preventDefault();
}
})
var lastTouchEnd=;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=){
event.preventDefault();
}
lastTouchEnd=now;
},false)
}
经过测试,这种方法只能禁止双击缩放。只好继续找解决方案了。
原来在iOS里有一组双指手势操作的事件:gesturestart、gesturechange、gestureend
在上面的js方法里加入下面的事件监听:
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
既不能双击缩放,也不能双指缩放。
完整代码:
<script>
window.onload=function () {
document.addEventListener('touchstart',function (event) {
if(event.touches.length>){
event.preventDefault();
}
});
var lastTouchEnd=;
document.addEventListener('touchend',function (event) {
var now=(new Date()).getTime();
if(now-lastTouchEnd<=){
event.preventDefault();
}
lastTouchEnd=now;
},false);
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
}
</script>
这样就OK了
完美解决ios10及以上Safari无法禁止缩放的问题的更多相关文章
- 解决ios10及以上Safari双击和双指缩放无法禁止的问题
移动端web缩放有两种: 1.双击缩放: 2.双指手势缩放. 在iOS 10以前,iOS和Android都可以通过一行meta标签来禁止页面缩放 <meta content="widt ...
- 完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
- 解决IOS移动端 Safari流浪器 onclick无法触发的问题
在移动端布局的时候, 在底部有一个button, 页面超过两屏, 是一个可滚动的的网页, 当运行在移动端Safari浏览器上的时候, 向下滑动页面, 浏览器的头部和尾部会自动隐藏, 这样可视区域就会变 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- 完美解决 Linux 下 Sublime Text 中文输入
首先,我参考了好几篇文章,都是蛮不错的,先列出来: sublime-text-imfix:首先推荐这个方法,最简单,但是在我的系统上有些问题.可用这个的强烈推荐用这个 完美解决 Linux 下 Sub ...
- Linux安装软件时缺少依赖包的简单较完美解决方法!
大家在linux下源码安装时,有木有经常碰到缺少这个包那个包的,然后不知所措?看到最近有几个筒子安装thrift,安装python因缺少依赖包而进行不下去了.我用的是红帽,装系统的时候习惯把所有的有的 ...
- MacBook Pro/Air 下使用 linux ubuntu 系统 波浪号“~”变成其他 符号 的完美解决办法
打开终端,输入: sudo su - > /sys/module/hid_apple/parameters/iso_layout sudo su -需要root权限,所以使用前请注意已下载roo ...
- VC++ 实现VC程序启动时最小化到任务栏(完美解决闪烁问题)
之前写的一个VC应用程序,是程序启动时就直接出现在任务栏, 窗体不出现,等用户点击任务栏图标再出现窗口.和一些防火墙什么的软件类似. 这种效果实现并不是很困难的,硬是找不到最好的.为什么呢? 首先,在 ...
随机推荐
- BRAFT EDITOR富文本编辑器
https://braft.margox.cn/demos/basic 官方文档 import React from 'react' import Uploading from '../Upl ...
- matlab学习使用Button Group绘制不同的正弦曲线
创建buttongroup控件---即按钮组 再添加三个radiobutton 对其设置 buttongroup控件改Title为绘制不同正弦曲线 第一个radiobutton的string改为sin ...
- 【ownCloud】添加信任域
如果在安装ownCloud后,更换了访问方式,比如刚开始是http://127.0.0.1/owncloud,变成了http://1.1.1.1/owncloud,那么在访问时可能得到这样的页面: 您 ...
- SPU、SKU、ARPU是什么,我来记录一下我的理解
在电商系统里经常会提到“商品”.“单品”.“SPU”.“SKU”这几个词,那么这几个词到底是什么意思呢? 既然不知道是什么,那么我们就查一下:SPU = Standard Product Unit ( ...
- redis在windows上通过cmd连接服务器(需要密码)
- 痛苦的Windows下的temp目录
2007不能运行了,错误: [MSBuild Error] “DCC”任务意外失败. System.Configuration.ConfigurationErrorsException: 配置系统未能 ...
- android的数据与访问(1)-我的app配置参数文件放在哪儿?
系统提供数据处理方式: 1.SharedPreferences 2.文件存储 3.轻量级的数据.如SQLLite 1.简单存储 是android提供的起来年纪的数据存储方式:SharedPerence ...
- magento 的一些Sql查询
1,模拟使用getName()获取产品名称的sql SELECT `value` AS product_name FROM yo_catalog_product_entity_varchar WHER ...
- POJ 2607
一次FLOYD,再枚举. 注意题目要求的输出是什么哦. #include <iostream> #include <cstdio> #include <cstring&g ...
- HTML5的未来
2014年10月29日,万维网联盟(W3C)宣布,经过差点儿8年的艰辛努力.该标准规范终于终于制定完毕.之所以是8年,由于在1999年HTML4的规范制定以后,W3C对于HTML的发展.貌似就不再那么 ...