h5开发手指滑动页面造成卡顿

今天配合app那边，需要提供一个页面，然后这个页面就相当于h5内嵌app了。页面写完之后我在我本地的手机打开之后，发现有卡顿现象。不知道大家有没有遇到过，就是你可能用手指滑动了好几次屏幕，正常来说页面应该会上下滚动，但是滑动好几次，就滚动了2次或者3次。
我在网上也找到了一些资料，我把我找的质料复制粘贴过来就是下面这些：

1. ios端的-webkit-overflow-scrolling属性可控制页面滚动效果，设置如下实现惯性滚动和弹性效果：

body{
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	overflow-y: scroll;
}

2. 由于盒子设置了高度100%引起的，注意，这里是删除下面的代码

html,body{
	height: 100%;
}

但是这两种方法都不适合我，我的问题再安卓上也会出现，第二种方法我根本就没有设置，但是第二种方法我发散了一下思维，会不会是我的组件设置了height: 100%;引起的？（因为我的代码是用Vue写的，所以组件的话在熟悉不过了吧。）。

改完之后我不知道是真的起了效果还是怎么样，感觉好了一点，但是卡顿并没有完全解决。
最后我看了一下代码我发现我设置了这个属性 touch-action: none;，这个属性的作用就是禁止用户的手势操作。比如用户可能会进行双手捏合操作，这样会让我们页面跟随用户意愿任意的放大缩小。我不希望用户这样，所以我就使用了这个属性禁掉了。
然后我把它删掉之后页面就不卡顿了。。。，我没有再往下研究里面的原理是什么，但是我感觉应该和移动端点击事件有300ms延迟的问题应该差不多。
但是这样用户就可以任意的放大缩小我们的页面了，怎么办呢？

1. 其实我们可以联系app那边，让他们那边禁止掉用户的双手捏合事件。
2. 或者不想麻烦app那边可以设置
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />