1)click事件300ms的延迟相应

原因:浏览器兴起初期,为了判断用户是双击还是单击,就设置了一个时间段300ms,用户单击后300ms后做事件处理,如果在300ms内连续点击,就判断为双击,做双击处理事件。所以现在用click绑定事件呢,就会有300ms延迟的问题。我们一般在移动端用tap事件来取代click事件。

解决方式:

  • fastclick.js 可以解决在手机上点击事件的300ms延迟
  • zepto的touch模块,tap事件也是为了解决在click的延迟问题
  • 触摸屏的相应顺序为touchstart -> touchmove -> touchend -> click,也可以通过绑定touchstart事件,加快事件的响应,解决300ms的延迟问题,但如果蒙版采用touchstart,而蒙版后面又有可点击控件的话,就会造成透传。

2)非可点击元素触发不了click事件

一些情况下对非可点击元素(label,span)监听click事件,iso下不会触发,css增加cursor:pointer就搞定了。

3)h5底部输入框被键盘遮挡问题

当输入框在最底部,点击软键盘后输入框会被遮挡

无法复现

4)禁止识别email

1
2
<!--禁止email识别-->
<meta content="email=no" name="format-detection">

5)禁止 iOS 识别长串数字为电话

1
2
<!--禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示成蓝色,样式加成别的颜色也是不生效的。-->
<meta content="telephone=no" name="format-detection">

6)禁止 iOS 弹出各种操作窗口

1
-webkit-touch-callout:none

7)iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格

1
2
可以通过正则去掉      
this.value = this.value.replace(/\u2006/g, '');

没能复现

8)禁止ios和android用户选中文字

1
user-select:none

9)CSS动画页面闪白,动画卡顿

尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位

没能复现

10)viewport

1
2
3
4
5
6
7
<meta charset="utf-8">
<!--主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--这个也是iphone私有标签,允许全屏浏览。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有标签,iphone顶端状态条的样式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">

11)移动端点透问题

和300ms click延迟有关

案例如下:

300clickms
1
2
3
4
5
6
7
<div id="box">
<a href="http://ymlog.cn">this is a box!</a>
</div>
<div id="mask"><p>This IS A Mask</p></div>

mask blue
box orange

div是绝对定位的蒙版,并且z-index高于a。而a标签是页面中的一个链接,我们给div绑定tap事件:

1
2
3
4
5
6
7
8
9
10
let box = document.querySelector("#box");
let mask = document.getElementById("mask");

mask.addEventListener('touchstart', e => { // 使用touchstart规避300ms延时
mask.style.display = 'none';
})

box.addEventListener('click', e => {
alert('click')
})

我们点击蒙层时div正常消失,但是当我们在a标签上点击蒙层时,发现a链接被触发,这就是所谓的点透事件。

原因:

touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时click还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。
解决:

  1. 尽量都使用touch事件来替换click事件。例如用touchend事件(推荐)。
  2. 用fastclick,https://github.com/ftlabs/fastclick
  3. 以上一般都能解决,实在不行就换成click事件。

References

https://zhuanlan.zhihu.com/p/28206065

https://segmentfault.com/a/1190000015131445

https://blog.fundebug.com/2019/03/18/21-method-to-optimize-css-and-speedup-web/