一.点击穿透：
原因：
1. touch事件300ms后，触发click事件；
2. 混用touch和click会导致点透问题。
解决思路：
1.不要混用touch和click；
2.阻止掉 touch之后的click。
解决方案：
1.tap后延迟350ms再隐藏mask；
2.pointer-events：mask隐藏后，给按钮下面元素添上 pointer-events: none; 样式，让click穿过去，350ms后去掉这个样式，恢复响应；
3.fastclick
4.只用click
5.只用touch
二.ios微信不支持position:fixed属性
解决方案：
1.先显示假的输入框，点击后出现真的；
2.用CSS布局；
三.retina屏1px问题
原因：
设备像素比(device pixel ratio,简称dpr) = 物理像素 / 设备独立像素；
css中的1px,也就是设备独立像素，并不等于移动设备的1px(物理像素)，这些由于不同的手机有不同的设备像素比。
解决方案：
1.通过viewport + REM的方式来兼容。
目前这种兼容方案相对比较完美，适合新项目（老项目改用REM单位成本会比较高）。淘宝M首页就是这种方案。
在devicePixelRatio = 2 时，输出viewport
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio = 3 时，输出viewport
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
同时设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。