码迷,mamicode.com
首页 > 移动开发 > 详细

移动端click延迟解决方法

时间:2018-03-02 20:35:29      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:nbsp   延迟   1.0   init   原因   cli   tor   log   css   

首先要知道为什么移动端的click会迟钝?

谷歌的开发者文档《300ms tap delay, gone away》可以找到原因

移动端要判断是不是双击,所以单击之后不能够立刻触发click,要等300ms,直到确认不是双击了才触发click。所以就导致了click有延迟。

方法1

<meta name="viewport" content="width=device-width">
就是把viewport设置成设备的实际像素, 就不会有这300ms的延迟了, 并且受到了IE/Firefox/Safari(IOS 9.3)的支持,也就是说现在的移动端开发可以不用顾虑click会比较迟钝的问题。
 

方法2

设置initial-scale=1.0,在Chrome上是可以生效,但是Safari不会:
<meta name="viewport" content="initial-scale=1.0">
 

方法3

设置CSS:
html {
  touch-action: manipulation;
}
这样也可以取消掉300ms的延迟,Chrome和Safari都可以生效。

移动端click延迟解决方法

标签:nbsp   延迟   1.0   init   原因   cli   tor   log   css   

原文地址:https://www.cnblogs.com/assert/p/8494429.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!