移动端阻止Touch导致的页面滑动/缩放

应用场景：比如我们制作一个H5小游戏的时候，一些玩家需要通过左右滑动操作来控制角色移动。但在默认情况下，移动端的左右/上下滑动会导致页面也被滑动/缩放，这样非常影响体验。

因此，整理出来如下解决方案：

一、在body元素上设置style属性touch-action:none

关于touch-action事件控制属性，可参见MDN中的定义：

touch-action - CSS：层叠样式表 | MDN (mozilla.org)

将其值在顶层元素（例如body元素中）设置为none，可以取消浏览器中定义的触控事件。

二、设置meta的viewport内容中user-scalable为no

标签中定义viewport的内容，通常用于控制视口的大小和形状。这是为了解决可能存在虚拟视口不适配终端，而产生页面缩放的情况。例如，如果移动屏幕的宽度为 640px，则页面可能会使用 980px 的虚拟视口渲染，然后页面将缩小以适应 640px 的空间。

其涉及的可定义内容如下：【在content =".."中定义内容，用逗号分隔】

 
<meta name="viewport"
 content="
     height = [pixel_value | device-height] ,
     width = [pixel_value | device-width ] ,
     initial-scale = float_value ,
     minimum-scale = float_value ,
     maximum-scale = float_value ,
     user-scalable = [yes | no] ,
     interactive-widget = [resizes-visual | resizes-content | overlays-content]
  "
 />

下面简单理解下上述属性内容：

• width/height：定义视口的宽高，可以取特殊值device-width / device-height，即取终端的宽高。
• initial-scale：控制页面首次加载显示的缩放倍数。默认1.0
• minimum-scale：页面允许的最小缩放倍数。最小值是 0.1。最大值是 10。默认值为 1.0。负值会被忽略。
• maximum-scale：页面允许的最大缩放倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。
• user-scalable：控制页面是否允许放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1，与 yes 相同。【本应用场景下若要阻止缩放滚动，应该设置该值为no】
• interactive-widget：指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。视口分为可视视口（visual viewport）和布局视口（layout viewport），前者一般会小于后者，所以在出现虚拟键盘时候，这个属性可控制组件变化时视口是否自动调整大小。有效值：resizes-visual、resizes-content 或 overlays-content。默认值：resizes-visual

三、设置body元素上的touch监听事件中preventDefault

对touchmove等事件，在body元素的监听回调中设置e.preventDefault()