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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值