汇总(不断总结中...)
1. 关于手机端点击事件延迟
移动端页面对于点击事件会有300毫秒的延迟,也就是js捕获click事件的回调函数处理,需要300ms后才生效.
延迟原因,因为存在双击缩放的事件,当你点击以此之后,浏览器会等待一段时间以确定你是否是在做双击操作,这段时间就是上面提到的300ms.
知道了产生原因,那就着手解决。
① 禁止缩放
既然是因为双击缩放引起的,那就不允许缩放。
<meta name="viewport" content="width=device-width user-scalable= 'no'">
② fastclick.js
一个专门解决手机延迟问题的轻量级的库。
FastClick.attach( document.body );
2.画一条0.5px的线
.line {
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%;
background: red;
}