写这篇文章并没有什么特别的原因,只是有一天突然发现自己对移动端涉猎并不算多,看着越来越多的网页流量来源自移动端,我开始方了,觉得有些事情,也该总结总结
在移动端,主要的来说,优化重点可以放在两个方面
- 交互优化
- 性能优化
那我今天先归纳一下交互方面的优化
点击的优化
我们知道在同是一个点击事件,在移动端的和在pc端给用户的体验是不一样的
点击事件上
移动端的的click里面有300ms的延迟,因为我们需要区分但双击,来判断是否你只是想放大页面(这是移动端的特性)
那么我们该如何优化?
使用touch事件
touch事件可以使手机端更好的去响应一个触摸事件,这个是大家都可能知道的一个优化方法
引用移动框架
引入zepto,用tap事件来代替cilck
但是我们首先要知道,tap不是原生事件,tap包括了三个:touchstart/touchmove/touchend
那我们的判断基本条件是什么:
1.触摸到离开事件间隔短
2.从起点到终点事件间隔小
点击反馈
还有一个比较特别的一点,既然点击事件有点慢,能不能有什么小技巧让他外部看上去不那么慢呢?
其实还有一个小方法,就是设置一个点击态,比如在你点击的时候,按钮颜色变深了一点,一般人在点击按钮之后半秒钟还没收到交互反馈,一般就会再次点击,那么如果有个点击态,在用户方面,让他了解自己已经操作了。这样就不至于让人有种卡机,然后狂点按钮
解决办法
- 方案1:使用:active伪类 ———>缺点:滚动的时候会触发样式
- 方案2:使用js,添加样式,在150毫秒左右就去掉
表单输入优化
在移动端输入表单的场景你一定不少见,但是为什么有些表单会让自己的手机跳出不同的输入框
电子邮件input类型
1 | <input type="email" name="email" > |
iOS和Android浏览器都显示了轻度定制过的键盘。注意缩短的空格键的存在和iOS键盘的最底一行加入了@ 和句号(.)键。 而在Android上,标准逗号键将出现在空格键的左边,已经被一个@键替换。
URL input 类型
1 | <input type="url" name="url"> |
iOS的URL input键盘
url input 类型可以用来帮助用户输入网址。在iOS上,所有的空格键已被替换成句号(.)键和正斜杠(/)键,以及一个特殊的.com键。
我的测试显示,Android键盘没有变化。
数字input类型
1 | <input type="number" name="number"> |
时间类型
1 | //1 |
关于兼容
据我所知,桌面端对于日期时间类input的兼容并不算特别的好,火狐就有些是不支持的,包括ios和安卓的兼容能力也是中等。但是input的其他属性都还是兼容移动端不错的。