屏蔽多点触控缩放手势造成的页面缩放

移动端屏蔽很简单,只要加上这句在Head即可:

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



而PC端,特别是谷歌浏览器,移动端的方式不会起作用,后来查到一个api: 

touch-acion: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]


属性值:
auto:默认值。浏览器允许一些手势(touch)操作在设置了此属性的元素上,例如:对视口(viewport)平移、缩放等操作。

none:禁止触发默认的手势操作。

pan-x:可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。

pan-y:可以在父级元素内进行垂直移动的手势操作。

manipulation:允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持


果断尝试下,直接设置不像启用多点缩放手势的div上或者直接document上直接添加这个css属性,测试成功,不再出现缩放的问题,由于本人没有红外或者电容触控屏,现在只是用Ipad的duet进行模拟成PC的屏幕,并将Ipad的触控给PC用来进行测试,并不清楚真实的红外或者电容一体机是否还会出现这些情况。



网站导航