写这篇文章并没有什么特别的原因，只是有一天突然发现自己对移动端涉猎并不算多，看着越来越多的网页流量来源自移动端，我开始方了，觉得有些事情，也该总结总结

在移动端，主要的来说，优化重点可以放在两个方面

• 交互优化
• 性能优化
  那我今天先归纳一下交互方面的优化

点击的优化

我们知道在同是一个点击事件,在移动端的和在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
2
3
4
5
6
7
8

//1
<input type="date" name="date">
//2
<input type="time" name="time">
//3
<input type="datetime" name="datetime">
//4
<input type="month" name="month">

关于兼容

据我所知，桌面端对于日期时间类input的兼容并不算特别的好，火狐就有些是不支持的，包括ios和安卓的兼容能力也是中等。但是input的其他属性都还是兼容移动端不错的。