IE 10 禁用多点触摸放大缩小页面_ie10 禁止双指放大缩小

最近在做项目的时候，要求禁用页面的放大缩小功能，在可触摸的终端，是可以通过多手指去放大缩小页面的，通常我们都是通过加<meta>标签：

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

但其实这样根本没用，于是我又通过监听touchstart touchmove 进行拦截（当触摸屏幕的手指 >=2 时才拦截事件），但是发现在 IE10 上面根本没有作用，还是能够通过手指去放大缩小界面，其他浏览器就正常，经过调试发现，IE10下根本就没有走touch相关的事件，没有监听到当然也就无法拦截了，这下让我很懵逼，IE 系列总是这么让人头疼。。。。

没办法，问题还是要解决的，怎么办呢，于是上官网找了找了 ，总算找到了解决方法 ,以下是官方代码：

Advanced gesture input

<style>
    html {
        overflow: hidden;
        -ms-content-zooming: none; /* Disable pan/zoom */
    }
    #foo {
        background-color: red;
        width: 500px;
        height: 500px;
        -ms-transform-origin: 50%;
        -ms-transform-origin: 50%;
    }
</style>
<div id=”foo”></div>
<script>
    function handleEvent(event) {
        event.target.style.msTransform = “scale(“ + event.scale + “)”;
    }
    document.getElementById(“foo”).addEventListener(“MSGestureChange”, handleEvent, false);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

详情请点击：Touch Events For IE 10

主要看html中的样式 ：

-ms-content-zooming:none;

没错就是这一句，就解决了。有点坑爹啊，IE总是喜欢搞事，真是害苦了我们搞前端的。