首页 > 代码库 > 关于近期对于移动端开发的一些看法

关于近期对于移动端开发的一些看法

2024-11-13 17:25:39   202人阅读

首先移动端开发最基本的就是尺寸问题：

<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="http://www.mamicode.com/comment/detail.php?itemid=‘ + data.lists[i].itemid + ‘">‘ +
 37                                 ‘<div class="goods-image">‘ + ‘<img src="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/comment/detail.php?itemid=‘ + data.lists[i].itemid + ‘" class="join-btn">‘ + ‘<img src="http://www.mamicode.com/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="http://www.mamicode.com/comment/detail.php?itemid=‘ + data.setbacks[j].itemid + ‘">‘ +
 87                                 ‘<div class="goods-image">‘ + ‘<img src="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/comment/detail.php?itemid=‘ + data.setbacks[j].itemid + ‘" class="join-btn">‘ + ‘<img src="http://www.mamicode.com/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="http://www.mamicode.com/comment/detail.php?itemid=‘ + data.numdata[k].itemid + ‘">‘ +
135                                 ‘<div class="goods-image">‘ + ‘<img src="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/comment/detail.php?itemid=‘ + data.numdata[k].itemid + ‘" class="join-btn">‘ + ‘<img src="http://www.mamicode.com/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);
　　}

 

关于近期对于移动端开发的一些看法


联系
我们