触摸屏怎么禁止浏览器的缩放？？？求解答

Question

触摸屏怎么禁止浏览器的放大缩小？？？

Answer 1

当前所在的项目是在win7的平台上使用chrome进行一个触控的展示操作，硬件是一体机，基于win7的触控平台，浏览器使用chrome； 问题是我想要双指触控的时候不触发chrome的默认缩放，
使用了meta声明不允许缩放，
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
并且在js里添加了如下语句：
document.body.addEventListener('touchmove', function(event) {

event.preventDefault();  

}, false);
document.body.addEventListener('touchstart', function(event) {

event.preventDefault();  

}, false);
document.body.addEventListener('gesturechange', function(event) {

event.preventDefault();  

}, false);
结果，，，没用！双指触控的时候还是会触发默认的浏览器缩放，
我分析原因是不是chrome启动参数阻止缩放，最后通过修改浏览器参数解决了问题！
具体参考https://jingyan.baidu.com/art...

Answer 2

很多种方式，结合实际的情况来，最多使用方式是直接加head，<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />，比较极端的做法是在body里面加上ontouchmove="javascript:window.event.preventDefault();"

Answer 3

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

Answer 4

头部加上

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1">

Answer 5

一般的方法是

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />

此方法可以禁止掉绝大多数浏览器，但ios safari 上无效，可以使用阻止原生事件响应

    document.addEventListener('touchstart',function (event) { 
      if(event.touches.length>1){ 
        event.preventDefault(); 
      } 
    }) 
    var lastTouchEnd=0; 
    document.addEventListener('touchend',function (event) { 
      var now=(new Date()).getTime(); 
      if(now-lastTouchEnd<=300){ 
        event.preventDefault(); 
      } 
      lastTouchEnd=now; 
    },false) 

但是以上方法也并不是没有问题， 具体需要跟你的实际情况定

Answer 6

添加meta标签就行了阿 还想啥呢

Answer 7

上面说的实测无效，chrome、edge浏览器直接忽略那些设置

Answer 8

Answer 9

可以参考这篇文章，我就解决了触摸屏阻止网页放大缩小的终极解决方法（大型商场引导屏，多媒体触摸屏幕）