首先移动端开发最基本的就是尺寸问题：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
这行代码是肯定知道要加的，但是我们还会面临在不同尺寸的屏幕上对应尺寸的大小变化。对于这个问题我之前看过很多网站对于这个的处理，我主要是采用小米官网对于这个的修改，单位用rem，代码如下：
! function(n) {
var e = n.document,
t = e.documentElement,
i = 720,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function() {
var n = t.clientWidth || 320;
n > 720 && (n = 720), t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window);
然后直接用rem这个单位就可以了。切记100px=1rem;
对于移动端还会用到jQuery-mobile、zepto.js、fastclick.js、swiper.js、lazyload.js、dropload.js等插件。
下面我会一个一个说。
首先是jQuery-mobile和zepto.js，这俩主要是移动端的jQuery，主要是为了方便我们去操作。我用的是jquery-mobile，那我就主要说下这个吧，看代码：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8" />
6 <title>会员登录_DESTOON B2B网站管理系统手机版</title>
7 <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
8 <meta http-equiv="Cache-Control" content="no-siteapp" />
9 <meta name="generator" content="DESTOON B2B - www.destoon.com" />
10 <meta name="format-detection" content="telephone=no" />
11 <meta name="apple-mobile-web-app-capable" content="yes" />
12 <meta name="apple-mobile-web-app-title" content="DESTOON B2B网站管理系统手机版" />
13 <meta name="apple-mobile-web-app-status-bar-style" content="default" />
14 <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
15 <meta name="mobile-web-app-capable" content="yes">
16 <link rel="icon" sizes="128x128" href="apple-touch-icon-precomposed.png">
17 <meta name="msapplication-TileImage" content="apple-touch-icon-precomposed.png">
18 <meta name="msapplication-TileColor" content="#007AFF">
19 <link rel="shortcut icon" type="image/x-icon" href="http://192.168.1.181:8087/favicon.ico" />
20 <link rel="bookmark" type="image/x-icon" href="http://192.168.1.181:8087/favicon.ico" />
21 <link rel="stylesheet" type="text/css" href="http://192.168.1.181:8087/mobile/static/lib/jquery/jquery.mobile.custom.structure.min.css" />
22 <link rel="stylesheet" type="text/css" href="http://192.168.1.181:8087/mobile/static/style.css" />
23 <script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/lib/jquery/jquery-2.1.1.min.js"></script>
24 <script src="http://192.168.1.181:8087/mobile/static/lib/rem.js" type="text/javascript" charset="utf-8"></script>
25 <script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/lib/jquery/jquery.mobile.custom.min.js"></script>
26 <script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/js/common.js"></script>
27 <!--<script type="text/javascript" src="http://192.168.1.181:8087/mobile/static/js/fix.js"></script>-->
28
29 </head>
30 <link rel="stylesheet" type="text/css" href="css/index.css" />
31 <link rel="stylesheet" type="text/css" href="dist/swiper.min.css" />
32
33 <body>
34 <style type="text/css">
35 #menu {
36 background-color: #FFFFFF;
37 height: 100%;
38 width: 303px;
39 position: fixed;
40 right: -303px;
41 top: 0rem;
42 }
43
44 .active {
45 color: #fff;
46 text-shadow: 0 1px 1px #000;
47 }
48 </style>
49 <div data-role="page" class="page" id="home">
50 <!--主页模板-->
51 <div class="ui-toast"></div>
52 <div class="ui-mask"></div>
53 <div class="ui-sheet"></div>
54 <div id="head-bar">
55 <div class="head-bar">
56 <div class="head-logo">
57 <img src="image/index/logo.png" />
58 </div>
59 <div class="head-location">
60 <a href="" style="font-size: 0.28rem;">北京站<span class="down"></span></a>
61 </div>
62 <div class="head-bar-right">
63 <a href="" class="index-person showMenu"></a>
64 </div>
65 </div>
66 <div class="head-bar-fix"></div>
67 </div>
68 <div class="main">
69 //主页代码
70 </div>
71 </div>
72 <!-- /page -->
73 <!--page end-->
74 <div id="menu" class="menu">
75 //侧滑菜单
76 </div>
77
78 </body>
79
80 </html>
因为我当时的项目是有一个侧滑菜单，所以有一个menu的div，其实正常情况下都是在main这个div里边写代码的，上边的head-bar就是头部条，基本就是这样。
对于fastclick这个插件主要是解决在iOS系统中点击有300毫秒延迟的这个问题我们引入fastclick之后加入代码：
1 if (‘addEventListener‘ in document) {
2 document.addEventListener(‘DOMContentLoaded‘, function() {
3 FastClick.attach(document.body);
4 }, false);
5 }
如果引入了jquery的话我们还可以简化：
1 $(function() {
2 FastClick.attach(document.body);
3 });
对于swiper这个插件，大家很熟悉，主要是在移动端用的比较多，因为在swiper3里边没有做对于IE的兼容，如果你做的是PC端，那还是推荐你用swiper2，或者是islide，fullPage等插件吧。
swiper很强大，这里不多说，想了解的人可以查看这个的文档。我做的HTML5的特效动画都是通过这个做的。很简单，很炫。
dropload.js主要是上拉加载和下拉刷新，这个插件我也是刚弄会，用的还行吧，基本实现比较简单，在移动端不会出现什么问题，其实你也可以自己写下拉加载，但是效果可能没有这个好。
要用这个你必须得会ajax请求，这个是一个比较简单的东西，就不多说了。代码在此：
1 var num = 10;
2 var page1 = 1;
3 var page2 = 1;
4 var page3 = 1;
5 // dropload
6 var dropload = $(‘body‘).dropload({
7 scrollArea: window,
8 //滑动最小距离
9 distance: 50,
10 //提前加载距离
11 threshold: 200,
12 domDown : {
13 domClass : ‘dropload-down‘,
14 // 滑动到底部显示内容
15 domRefresh : ‘<div class="dropload-refresh">↑上拉加载更多-商品信息</div>‘,
16 // 内容加载过程中显示内容
17 domLoad : ‘<div class="dropload-load"><span class="loading"></span>马上就好...</div>‘,
18 // 没有更多内容-显示提示
19 domNoData : ‘<div class="dropload-noData">没有更多内容了</div>‘
20 },
21 //上拉加载
22 loadDownFn: function(me) {
23 // me.unlock();
24 // 加载菜单一的数据
25 if(itemIndex == ‘0‘) {
26 $.ajax({
27 type: ‘GET‘,
28 url: ‘http://192.168.2.181:8081/m.ygou/json.php?action=all&page=‘ + page1,
29 dataType: ‘json‘,
30 success: function(data) {
31 var result = ‘‘;
32 //页码加1
33 page1++;
34 for(var i = 0; i < data.lists.length; i++) {
35 result += ‘<li>‘ +
36 ‘<a class="catalog-item goods" href="comment/detail.php?itemid=‘ + data.lists[i].itemid + ‘ ">‘ +
37 ‘<div class="goods-image">‘ + ‘<img src=" ‘ + data.lists[i].thumb + ‘ "/>‘ + ‘</div>‘ +
38 ‘<div class="info">‘ +
39 ‘<p class="goods-title">‘ + data.lists[i].title + ‘</p>‘ +
40 ‘<div class="goods-common">‘ +
41 ‘<div class="goods-progress">‘ +
42 ‘<p>‘ + "参与进度：" + ‘<span id="join_progress">‘ + data.lists[i].jindu + ‘</span>‘ + ‘</p>‘ +
43 ‘<div class="goods-progress-box">‘ + ‘<div class="goods-progress-slide" style="width: ‘ + data.lists[i].jindu + ‘">‘ +
44 ‘</div>‘ + ‘</div>‘ +
45 ‘</div>‘ +
46 ‘<a href="comment/detail.php?itemid=‘ + data.lists[i].itemid + ‘ " class="join-btn">‘ + ‘<img src="img/index/lijicanyu.png"/>‘ + ‘</a>‘ + ‘</div>‘ +
47 ‘</div>‘ +
48 ‘</a>‘ +
49 ‘</li>‘;
50
51 }
52
53 $(‘.lists ul‘).eq(itemIndex).append(result);
54 //判断是否加载完了
55 if(data.lists.length < num) {
56 // 数据加载完
57 tab1LoadEnd = true;
58 // 锁定上拉下拉操作
59 me.lock();
60 // 无数据
61 me.noData();
62 $(‘.dropload-down‘).css("margin-bottom","0rem");
63 // break;
64 }
65 // 每次数据加载完，必须重置
66 me.resetload();
67
68 },
69 error: function(xhr, type) {
70 alert(‘加载失败请重试！‘);
71 // 即使加载出错，也得重置
72 me.resetload();
73 }
74 });
75 // 加载菜单二的数据
76 } else if(itemIndex == ‘1‘) {
77 $.ajax({
78 type: ‘GET‘,
79 url: ‘http://192.168.2.181:8081/m.ygou/json.php?action=jindu&page=‘ + page2,
80 dataType: ‘json‘,
81 success: function(data) {
82 page2++;
83 var result = ‘‘;
84 for(var j = 0; j < data.setbacks.length; j++) {
85 result += ‘<li>‘ +
86 ‘<a class="catalog-item goods" href="comment/detail.php?itemid=‘ + data.setbacks[j].itemid + ‘ ">‘ +
87 ‘<div class="goods-image">‘ + ‘<img src=" ‘ + data.setbacks[j].thumb + ‘ "/>‘ + ‘</div>‘ +
88 ‘<div class="info">‘ +
89 ‘<p class="goods-title">‘ + data.setbacks[j].title + ‘</p>‘ +
90 ‘<div class="goods-common">‘ +
91 ‘<div class="goods-progress">‘ +
92 ‘<p>‘ + "参与进度：" + ‘<span id="join_progress">‘ + data.setbacks[j].jindu + ‘</span>‘ + ‘</p>‘ +
93 ‘<div class="goods-progress-box">‘ + ‘<div class="goods-progress-slide" style="width: ‘ + data.setbacks[j].jindu + ‘">‘ +
94 ‘</div>‘ + ‘</div>‘ +
95 ‘</div>‘ +
96 ‘<a href="comment/detail.php?itemid=‘ + data.setbacks[j].itemid + ‘ " class="join-btn">‘ + ‘<img src="img/index/lijicanyu.png"/>‘ + ‘</a>‘ + ‘</div>‘ +
97 ‘</div>‘ +
98 ‘</a>‘ +
99 ‘</li>‘;
100
101 }
102 $(‘.lists ul‘).eq(itemIndex).append(result);
103 //如果当前页返回的数据少于每页的最大值则
104 if(data.setbacks.length < num) {
105 // 数据加载完
106 tab2LoadEnd = true;
107 // 锁定
108 me.lock();
109 // 无数据
110 me.noData();
111 $(‘.dropload-down‘).css("margin-bottom","0rem");
112 // break;
113 }
114 // 每次数据加载完，必须重置
115 me.resetload();
116
117 },
118 error: function(xhr, type) {
119 alert(‘加载失败请重试!‘);
120 // 即使加载出错，也得重置
121 me.resetload();
122 }
123 });
124 } else if(itemIndex == ‘2‘) {
125 $.ajax({
126 type: ‘GET‘,
127 url: ‘http://192.168.2.181:8081/m.ygou/json.php?action=renci&page=‘ + page3,
128 dataType: ‘json‘,
129 success: function(data) {
130 page3++;
131 var result = ‘‘;
132 for(var k = 0; k < data.numdata.length; k++) {
133 result += ‘<li>‘ +
134 ‘<a class="catalog-item goods" href="comment/detail.php?itemid=‘ + data.numdata[k].itemid + ‘ ">‘ +
135 ‘<div class="goods-image">‘ + ‘<img src=" ‘ + data.numdata[k].thumb + ‘ "/>‘ + ‘</div>‘ +
136 ‘<div class="info">‘ +
137 ‘<p class="goods-title">‘ + data.numdata[k].title + ‘</p>‘ +
138 ‘<div class="goods-common">‘ +
139 ‘<div class="goods-progress">‘ +
140 ‘<p>‘ + "参与进度：" + ‘<span id="join_progress">‘ + data.numdata[k].jindu + ‘</span>‘ + ‘</p>‘ +
141 ‘<div class="goods-progress-box">‘ + ‘<div class="goods-progress-slide" style="width: ‘ + data.numdata[k].jindu + ‘">‘ +
142 ‘</div>‘ + ‘</div>‘ +
143 ‘</div>‘ +
144 ‘<a href="comment/detail.php?itemid=‘ + data.numdata[k].itemid + ‘ " class="join-btn">‘ + ‘<img src="img/index/lijicanyu.png"/>‘ + ‘</a>‘ + ‘</div>‘ +
145 ‘</div>‘ +
146 ‘</a>‘ +
147 ‘</li>‘;
148
149 }
150 $(‘.lists ul‘).eq(itemIndex).append(result);
151 if(data.numdata.length == 0) {
152 // 数据加载完
153 tab3LoadEnd = true;
154 // 锁定
155 me.lock();
156 // 无数据
157 me.noData();
158 $(‘.dropload-down‘).css("margin-bottom","0rem");
159 // break;
160 }
161 // 每次数据加载完，必须重置
162 me.resetload();
163
164 },
165 error: function(xhr, type) {
166 alert(‘加载失败请重试!‘);
167 // 即使加载出错，也得重置
168 me.resetload();
169 }
170 });
171 }
172 }
173 });
相信看完代码的人肯定会有一个具体的了解。
然后说一些常规的东西吧，在移动端点击会出现浅色背景，这个怎么解决？
我们可以添加这个样式：
.xxx {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
还有一些其他注意的地方类似：
1 /*消除transition闪屏*/
2 .css {
3 -webkit-transform-style: preserve-3d;
4 -webkit-backface-visibility: hidden;
5 }
6 * {
7 padding: 0;
8 margin: 0;
9 max-width: 640px;
10 -webkit-tap-highlight-color:rgba(255,255,255,0);
11 -webkit-text-size-adjust:none;
12 -webkit-touch-callout:none; /*系统默认菜单被禁用*/
13 -webkit-user-select:none; /*webkit浏览器*/
14 -khtml-user-select:none; /*早期浏览器*/
15 -moz-user-select:none;/*火狐*/
16 -ms-user-select:none; /*IE10*/
17 user-select:none;
18 /*border: 1px solid red;*/
19 }
20
21 img {
22 border: none;
23 }
24
25 ul,
26 ol,
27 li {
28 list-style: none;
29 font-size: 18px;
30 }
31
32 a {
33 text-decoration: none;
34 }
35
36 body {
37 font-family: Helvetica;
38 background: #EEEEEE;
39 max-width: 640px;
40 }
41
42 input{
43 outline: none;
44 -webkit-appearance:none; /*去除input默认样式*/
45 -webkit-user-select:auto; /*webkit浏览器*/
46 }
下面是我网上找的一些地方需要注意：
web移动端开发技巧与注意事项汇总
一、meta的使用
1、<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览
2、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉：
<meta name="msapplication-tap-highlight" content="no">
3、忽略页面的数字为电话，忽略email识别
<meta name="format-detection" content="telephone=no, email=no"/>
二、针对适配等比缩放的方法:
@media only screen and (min-width: 1024px){
body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;}
}
或如：
@media all and (orientation : landscape) {
h2{color:red;}/*横屏时字体红色*/
}
@media all and (orientation : portrait){
h2{color:green;}/*竖屏时字体绿色*/
}
三、布局
1.布局使用百分比：
不同的手机有着不同的分辨率，这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素，因为子元素的百分比高度是根据父元素的高度来确定的，当父元素的高度为不确定值时，或者说父元素的高度未定义时，子元素的高度百分比将没有用（没有参照物）。所以只有设置了父元素的高度，子元素的高度百分比才会有用。
2.em与rem：
em是根据相对单位，不是固定的，他会继承父级元素的字体大小，若没有父级则em的相对基准点为浏览器的字体大小，浏览器的字体默认为16px，因此若无父级元素，相对于浏览器大小：Xem=X*16px;
rem是css3新增属性，是完全相对于HTML根元素大小设定的，默认为10px，因此无论父级字体大小，1rem=10px。
3.栅格布局：
box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。
4、wap页面有img标签，记得加上display：block；属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。
5、有关Flexbox弹性盒子布局一些属性
1、不定宽高的水平垂直居中
.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%，-50%)；
border-radius:6px;
background:#fff;
}
2、[flexbox版]不定宽高的水平垂直居中
.xx{
justify-content:center;//子元素水平居中，
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
四、文本的处理
1、关闭iOS键盘首字母自动大写
<input type="text" autocapitalize="off" />
2、//单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
3、//多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}
4、html {
-webkit-text-size-adjust: 100%;
}
五、图片、媒体的处理
1、//使用流体图片
img{
width:100%;
height:auto;
width:auto\9;
}
2、audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$(‘html‘).one(‘touchstart‘,function(){
audio.play()
})
3、如何禁止保存或拷贝图像
通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img {
-webkit-touch-callout: none;
}
PS：需要注意的是，该方法只在 iOS 上有效。
六、阴影的处理
1、 移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,textarea {
border: 0;
-webkit-appearance: none;
}
七、字体的处理
对于网站字体设置
1、移动端项目：
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
2、移动和pc端项目：
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
3、字体大小尽量使用pt或者em，rem，代替px。
4、设置input里面placeholder字体的大小 ::-webkit-input-placeholder{ font-size:10pt;}
5、解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased;
八、圆角设置
放一个图片或者一个按钮，设置圆角会比较美观，设置圆角的值可以用百分比，也可以用em等单位。
element{
border: 1px solid #ccc;
-moz-border-radius: 百分比;
-webkit-border-radius: 百分比;
border-radius: 百分比;
}
九、边距凹陷
1、像素边框（例子:移动端列表的下边框）
.list-iteam:after{
position: absolute;
left: 0px;
right: 0px;
content: ‘‘;
height: 1px;
transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-webkit-transform:scaleY(0.5);
}
2、
与在pc端开发一样，开发过程中需要的一个很需要注意的问题的边距塌陷，典型的问题是margin-top的嵌套，对子元素设置margin-top值，子元素相对于父元素的位置没有变，而父元素跟着子元素一起向下移动响应的距离。其原理可参考本人之前的笔记css之BFC学习笔记，解决方案：
1.给父元素div1设置一个padding值
.div1{
height: 500px;
width: 100%;
background: #ccc;
padding-top: 1px;
}
2.给父元素div1设置一个overflow：hidden；在不加overflow:Hidden;的时候，margin-top:这个属性是认不到边的，也就是失效。但是ie浏览器解决了这个问题，火狐、谷歌之类的就会出现失效，所以这是个标准问题，也是个兼容问题。
.div1{
height: 500px;
width: 100%;
background: #ccc;
overflow: hidden;
}
十、禁止内容
1、//禁止文本缩放
html {
-webkit-text-size-adjust: 100%;
}
2、移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
兼容IE6-9的写法：onselectstart="return false;" unselectable="on"
十一、滚动效果
十二、快速回弹
快速回弹滚动
.xxx {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：
http://www.idangero.us/sliders/swiper/index.php
十三、白色背景颜色搭配
十四、常用的移动端开发框架以及工具
框架
1. 移动端基础框架
zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库
Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案
2. 滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper
3.瀑布流框架
masonry
工具推荐
caniuse 各浏览器支持html5属性查询
paletton 调色搭配
十五、动画的处理
开启硬件加速
解决页面闪白
保证动画流畅
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画，
不使用position的left和top来定位
利用translate3D开启GPU加速
十六、消除闪烁
消除transition闪屏
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
十七、移动端取消touch高亮效果
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：
.xxx {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}