bc现金盘开发移动端300ms延迟的解决方法

方法一:bc现金盘开发禁止缩放(在meta标签中设置) Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作

<meta name="viewport" content="user-scalable=no,initial-scale=1,maximun-scale=1"/>

页面不可缩放,这样双击缩放功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

缺点:必须完全禁用缩放来达到目的,但是通常情况下,我们还是希望能通过双指来进行缩放的

方法二:更改默认的视口宽度(在meta标签中设置) Chorm和Firfox支持,Safari比较麻烦他还有双击缩放还有双击滚动操作

<meta name="viewport" content="width=device-width"/>

如果能识别出一个网站是响应式的网站,那么移动端浏览器就可以自动禁止双击缩放行为并去掉300ms的点击延迟。

设置上述的meta标签,那么浏览器就可以认为网站已经对移动端做过适配优化,就无需双击操作。

好处:没有完全禁用缩放,而是禁用浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。

方法三:css touch-action IE支持

touch-action:指定相应的元素上能够触发的用户代理(浏览器)的默认行为。

将该属性值设置为touch-action:none,那么表示在该元素上操作不会触发用户代理的任何默认行为。就无需进行300ms的延迟判断了。

方法四:FastClick 专门为解决移动端浏览器300ms点击延迟问题发开的一个轻量级的库。

原理:在检测到touchend事件的时候,会通过DOM自定义事件立即发出模拟一个click事件,并把300ms之后发出的click事件阻止掉。

猜你喜欢

转载自blog.51cto.com/13902472/2152664
今日推荐