ios禁止网页放大缩小

移动设备升级到iOS10了，发现了自带的Safari浏览器不再识别meta viewport了。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple~~

在iOS10之前都是通过

< meta name = "viewport" content = "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" >

来强制不让手机浏览器缩放的，但是升级到iOS10后Safari不再识别这个meta标签。所以得用js来hack一下：
禁用双指缩放：

document.documentElement.addEventListener( 'touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);

禁用手指双击缩放：

var lastTouchEnd = 0;
document.documentElement.addEventListener( 'touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);

如果在iOS10的Safari中设置了viewport，其实双击放大也是不生效的，所以个人觉得在iOS10上比较好的解决方案是先设置viewport，然后再用js禁用双指缩放即可，无需再设置禁用双击缩放。

同时给出这个解决方案的作者还提出了一个有情提示，如果任何一个子元素的touch事件设置了stopPropagation阻止事件冒泡的话，可能还是会失效，而且在iOS10中你的输入框字体最好不要小于16px，否则iOS在输入框获得焦点时可能还是会强制放大。

原文地址：http://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari

ios禁止网页放大缩小相关推荐

html页面不能放大缩小,互联网常识：html怎么禁止页面放大缩小
在html中,可以利用meta标签,设置content属性的值为"width=device-width, initial-scale=1.0, maximum-scale=1.0, user ...
android 百度地图禁止双击放大缩小,leaflet-div上禁止地图的拖动，放大缩小双击事件...
1. 先把dom的div对象获取到,可用document.getEleementById("divId"); //获取当前的this对象 const that = this; // ...
js禁止页面放大缩小
转载:https://www.cnblogs.com/dearxinli/p/7645922.html 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewpo ...
android 禁止屏幕放大缩小,禁止APP内Webview页面跟随系统缩放字号
最近开始做适配移动端的网页,通过APP内部的Webview展示.为了在不同分辨率的设备上都能按相同的布局来展示,使用了rem布局的页面自适应方式: (function (doc, win) { var ...
iOS 图片捏合放大缩小点击放大缩小
此处的图片控件,我用的是UIButton,因为它自身有点击事件,不过UIImageView同理,为其添加手势即可实现同样的效果. // // ServiceResultViewController. ...
通过Vue绑定zoom样式值实现禁止页面放大缩小
思路:禁止浏览器通过CTRL+与CTRL-放大与缩小页面比例,我们可以通过当页面放大(会触发window.onresize事件)时控制样式属性zoom按相应比例缩小(同理缩小窗体时zoom放大)来实现 ...
android 百度地图禁止双击放大缩小,百度地图API 在使用点聚合时，如果放大、缩小或移动地图时，添加的文字标签会消失...
问题:如题,百度地图API 在使用点聚合时,如果放大.缩小或移动地图时,添加的文字标签(label)会消失. 原因:API代码中的map.removeOverlay(marker),在这句话执行的时候 ...
WKWebView禁止放大缩小(捏合手势)
在webView加载完毕之后的delegate中,添加下面的JS代码禁止WKWebView放大缩小 // 加载完毕 - (void)webView:(WKWebView *)webView didFi ...
Js实现放大缩小html页面整体
Js实现放大缩小html页面整体不包含iframe的写法包含iframe的写法不包含iframe的写法 html代码 <body><div ><button onc ...

ios禁止网页放大缩小

ios禁止网页放大缩小相关推荐

最新文章

热门文章