解决IOS下meta设置user-scalable=no无效

Posted 2023-04-28

参考技术A 做移动开发，给页面头部添加了meta标签，并添加了user-scalable=no属性禁止双指或双击放大：

但是有些移动端浏览器，比如ios10以上的safari，安卓系统下的UC浏览器、QQ浏览器等，虽然meta标签如上写法，但依然允许双指缩放和双击放大。
一下方法亲测有下

通过阻止 touchstart 事件，解决移动端的 BUG

在 iOS10 下，即使设置了 meta 标签的 user-scalable=no 依然不能阻止用户缩放。

解决此 BUG 的方法是阻止 PC 事件：

document.addEventListener(‘touchstart‘, function(ev) {
    ev.preventDefault();
});

另外，此方法还能解决 iOS10 中横向页面溢出，即使给 body 设置了 overflow:hidden 依然能横向滑动的问题。

不过添加了此事件后会阻止 iOS10 的橡皮筋效果，另外也会禁止文字选中功能。

通过阻止 touchstart 的默认事件来解决此 BUG，另外阻止此默认事件还可以解决 300ms 延迟的 BUG。

 

当然，由于阻止了默认行为，那么 a 标签链接的默认跳转页就无法实现了，只能通过手动添加事件：

aDom.addEventListener(‘touchstart‘, function(ev) {
    window.location.href = "www.tirion.me";
});

输入框获取焦点也需要手动解决：

inputDom.addEventListener(‘touchstart‘, function(ev) {
    ev.stopPropagation();
});