移动端禁用双击放大手势

Posted 2022-09-09 orcim

网上容易找到的方法之一就是在head标签内定义页面元信息（meta）viewport如下：

 

 

COPY

EXPAND

1

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

 

 

COPY

EXPAND

尝试后发现并不怎么靠谱，并没有达到预期的效果，部分浏览器仍然会响应双击放大的手势。最终解决方案如下：

 

 

COPY

EXPAND

1

2

3

4

5

6

7

<script>

// “一刀切”方案：

document.ontouchend = function (e)

// 阻止页面 touchend 的默认事件

e.preventDefault();

</script>

 

 

COPY

EXPAND

当然这个办法并不理智，这样做会导致页面的click事件在移动端上失效，补救的办法可以是使用ontouchstart来代替click。

建议

其实完全可以通过避免页面内元素超出设备宽度来避免浏览器双击放大手势事件，不到万不得已最好还是在页面CSS上“下功夫”，合理进行页面布局和响应式才是正道。