1. 移动端字体小于 12px 时的异常显示
使用css3 transform进行缩放
2.移动端点击300ms延迟
原因：移动端机制问题，用来判断是点击双击。
解决方案：
- touch事件代替click事件
- 开源库fastClick
3. 移动端1px边框问题
由于移动端屏幕的设备像素与逻辑像素并不相等，所以产生在某些移动端的屏幕上1px边框略显粗。
.box{
position: relative;
border: none;
}
.box:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: 0 0;
}
4.安卓浏览器看背景图片，有些设备会模糊。
同等比例的图片在web上很清楚，但是手机上很模糊。devicePixelRatio（设备像素比）问题，分辨率太小。
- 使用2倍图
//srcset、image-set会自动选择合适的分辨率
<img src="/static/ad.jpg" srcset="/static/ad3x.png 3x,/static/ad2x.png 2x" >
background-image:image-set( url(img.jpg) 1x, url(img@2x.jpg) 2x )
5.防止手机中网页放大和缩小
使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
5.禁用自动识别页面中的电话号码
meta标签format-detection 格式检测，用来检测html里的一些格式。主要是电话、邮箱、地址。 默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
<!-- 不校验电话格式 -->
<meta name="format-detection" content="telephone=no">
<!-- 不校验 电话、邮箱和地址格式 -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">
6.点击穿透问题
当同时绑定 touchstart、touchend、click 三个事件的时候，触发的先后顺序是：touchstart -> touchend -> click。click 事件的滞后性设计导致事件穿透（点击穿透）问题。
- 使用touch事件来替换click事件
- 用fastclick
- 用preventDefault阻止a标签的click
7.ios滑动不流畅
-webkit-overflow-scrolling ：移动设备上是否使用滚动回弹效果。有两个值touch/auto。
- touch： 手指移开，会保持一段时间的滚动
- auto：手指移开，滚动会立即停止
-webkit-overflow-scrolling:touch
