网上容易找到的方法之一就是在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上“下功夫”，合理进行页面布局和响应式才是正道。
原文地址：https://www.cnblogs.com/Orcim/p/11431641.html
时间： 2024-10-01 00:28:56