关于近期对于移动端开发的一些看法
Posted 冰封ice
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于近期对于移动端开发的一些看法相关的知识，希望对你有一定的参考价值。
首先移动端开发最基本的就是尺寸问题：
<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);
}
以上是关于关于近期对于移动端开发的一些看法的主要内容，如果未能解决你的问题，请参考以下文章