坑

（1）. input placeholder问题

在手机上，placeholder内容明显靠上

解决办法： 不要设计input 的line-height或line-height设为normal.

（2）. line-height 在手机上会偏移。

解决办法：line-height: 高度 + 1；

（3）. 使用rem:

兼容ie9 + ;
浏览器默认高度16px; 1em = 16px;
rem只相对于根元素的font-size, 即只需要设置根元素的font-size,一般设置html的font-size: 62.5%;

（4）. 300ms延迟

方法： 禁用缩放

<meta name="viewport" content="user-scalable=no"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>

方法二：更改默认的视口宽度。

<meta name="viewport" content="width=device-width"/>

兼容性问题： Safari除了双击缩放还有双击滚动操作

（5）. 点击穿透
假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

移动端的事件执行顺序是touchstart > touchend > click.

不要混用touch和click;
取消掉touch之后的click；

解决方法：1）.只用touch 把页面内所有click全部换成touch事件（ touchstart 、’touchend’、’tap’），注意：a标签的href也是click，需要换成js的跳转。2）.延迟350ms隐藏B。

（6）. 出现虚拟键盘导致fixed元素错位

解决办法： 由于虚拟键盘出现并未抛出事件，而检测scroll或者resize事件，皆会有一定延迟，会出现闪烁现象。则当前获取焦点元素为文本元素，就将fixed元素设置为static。

（7）. 移动端手势

手指放在屏幕上：ontouchstart 手指在屏幕上滑动：ontouchmove 手指离开屏幕：ontouchend；

1.在touchstart事件触发时， 记录手指按下的时间startTime，本次滑动的初始位置initialPos。 2.在touchmove事件触发时， 记录当前位置nowPosition（实时移动元素），滑动距离movePosition（当前位置nowPosition与初始位置initialPos的差值），判断正负数再决定是左还是右移动。 3.在touchend事件触发时， 记录手指离开屏幕的时间endTime，获得手指在屏幕上停留的时间（endTime－startTime），滑动距离movePosition 判断是否滑动： 如果停留时间少于300ms，则认为是快速滑动，无论滑动距离是多少，都到下一页 滑动距离与‘容器’ 大小进行比较，若超过‘容器’大小的1/3，则到下一页

（8）. iphone动态生成的html元素click失效

解决方法： 为绑定click的元素增加css样式 cursor：pointer；