今天配合app那边,需要提供一个页面,然后这个页面就相当于h5内嵌app了。页面写完之后我在我本地的手机打开之后,发现有卡顿现象。不知道大家有没有遇到过,就是你可能用手指滑动了好几次屏幕,正常来说页面应该会上下滚动,但是滑动好几次,就滚动了2次或者3次。
我在网上也找到了一些资料,我把我找的质料复制粘贴过来就是下面这些:
- ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果:
body{
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow-y: scroll;
}
- 由于盒子设置了高度100%引起的,注意,这里是删除下面的代码
html,body{
height: 100%;
}
但是这两种方法都不适合我,我的问题再安卓上也会出现,第二种方法我根本就没有设置,但是第二种方法我发散了一下思维,会不会是我的组件设置了height: 100%;
引起的?(因为我的代码是用Vue
写的,所以组件的话在熟悉不过了吧。)。
改完之后我不知道是真的起了效果还是怎么样,感觉好了一点,但是卡顿并没有完全解决。
最后我看了一下代码我发现我设置了这个属性 touch-action: none;
,这个属性的作用就是禁止用户的手势操作。比如用户可能会进行双手捏合操作,这样会让我们页面跟随用户意愿任意的放大缩小。我不希望用户这样,所以我就使用了这个属性禁掉了。
然后我把它删掉之后页面就不卡顿了。。。,我没有再往下研究里面的原理是什么,但是我感觉应该和移动端点击事件有300ms延迟的问题应该差不多。
但是这样用户就可以任意的放大缩小我们的页面了,怎么办呢?
- 其实我们可以联系app那边,让他们那边禁止掉用户的双手捏合事件。
- 或者不想麻烦app那边可以设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />