天天看点

ios禁止网页放大缩小

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

在iOS10之前都是通过

&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"&gt;

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

禁用双指缩放:

document.documentElement.addEventListener('touchstart', function (event) {

  if (event.touches.length &gt; 1) {

    event.preventDefault();

  }

}, false);

禁用手指双击缩放:

var lastTouchEnd = 0;

document.documentElement.addEventListener('touchend', function (event) {

  var now = Date.now();

  if (now - lastTouchEnd &lt;= 300) {

  lastTouchEnd = now;

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

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

继续阅读