ios禁止网页放大缩小-阿里云开发者社区

ios禁止网页放大缩小

2017-08-23 4774

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 移动设备升级到iOS10了，发现了自带的Safari浏览器不再识别meta viewport了。以前我们都是用这个标签来让浏览器禁用缩放的。万恶的Apple~~ 在iOS10之前都是通过来强制不让手机浏览器缩放的，但是升级到iOS10后Safari不再识别这个meta标签。

移动设备升级到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