首先移動端開發最基本的就是尺寸問題:javascript
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>php
這行代碼是確定知道要加的,可是咱們還會面臨在不一樣尺寸的屏幕上對應尺寸的大小變化。對於這個問題我以前看過不少網站對於這個的處理,我主要是採用小米官網對於這個的修改,單位用rem,代碼以下:css
! 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;html
對於移動端還會用到jQuery-mobile、zepto.js、fastclick.js、swiper.js、lazyload.js、dropload.js等插件。html5
下面我會一個一個說。java
首先是jQuery-mobile和zepto.js,這倆主要是移動端的jQuery,主要是爲了方便咱們去操做。我用的是jquery-mobile,那我就主要說下這個吧,看代碼:
jquery
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就是頭部條,基本就是這樣。ios
對於fastclick這個插件主要是解決在iOS系統中點擊有300毫秒延遲的這個問題咱們引入fastclick以後加入代碼:css3
1 if ('addEventListener' in document) { 2 document.addEventListener('DOMContentLoaded', function() { 3 FastClick.attach(document.body); 4 }, false); 5 }
若是引入了jquery的話咱們還能夠簡化:web
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移動端開發技巧與注意事項彙總
1、meta的使用
一、<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,且不容許用戶點擊屏幕放大瀏覽
二、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉:
<meta name="msapplication-tap-highlight" content="no">
三、忽略頁面的數字爲電話,忽略email識別
<meta name="format-detection" content="telephone=no, email=no"/>
2、針對適配等比縮放的方法:
@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;}/*豎屏時字體綠色*/
}
3、佈局
1.佈局使用百分比:
不一樣的手機有着不一樣的分辨率,這時再用咱們pc端佈局經常使用的px就不合適了。使用百分比佈局要時時刻刻清楚其父元素,由於子元素的百分比高度是根據父元素的高度來肯定的,當父元素的高度爲不肯定值時,或者說父元素的高度未定義時,子元素的高度百分比將沒有用(沒有參照物)。因此只有設置了父元素的高度,子元素的高度百分比才會有用。
2.em與rem:
em是根據相對單位,不是固定的,他會繼承父級元素的字體大小,若沒有父級則em的相對基準點爲瀏覽器的字體大小,瀏覽器的字體默認爲16px,所以若無父級元素,相對於瀏覽器大小:Xem=X*16px;
rem是css3新增屬性,是徹底相對於HTML根元素大小設定的,默認爲10px,所以不管父級字體大小,1rem=10px。
3.柵格佈局:
box-sizing:border-box;能夠改變盒子模型的計算方式方便你設置寬進行自適應流式佈局。
四、wap頁面有img標籤,記得加上display:block;屬性來解決img的邊緣空白間隙的1px像素。若是圖片要適應不一樣的手機要設置width:100%;並且不能添加高度。
五、有關Flexbox彈性盒子佈局一些屬性
一、不定寬高的水平垂直居中
.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
二、[flexbox版]不定寬高的水平垂直居中
.xx{
justify-content:center;//子元素水平居中,
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
4、文本的處理
一、關閉iOS鍵盤首字母自動大寫
<input type="text" autocapitalize="off" />
二、//單行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
三、//多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(數字2表示隱藏兩行)
}
四、html {
-webkit-text-size-adjust: 100%;
}
5、圖片、媒體的處理
一、//使用流體圖片
img{
width:100%;
height:auto;
width:auto\9;
}
二、audio元素和video元素在ios和andriod中沒法自動播放
應對方案:觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
三、如何禁止保存或拷貝圖像
一般當你在手機或者pad上長按圖像 img ,會彈出選項 存儲圖像 或者 拷貝圖像,若是你不想讓用戶這麼操做,那麼你能夠經過如下方法來禁止:
img {
-webkit-touch-callout: none;
}
PS:須要注意的是,該方法只在 iOS 上有效。
6、陰影的處理
一、 移動端如何清除輸入框內陰影
在iOS上,輸入框默認有內部陰影,但沒法使用 box-shadow 來清除,若是不須要陰影,能夠這樣關閉:
input,textarea {
border: 0;
-webkit-appearance: none;
}
7、字體的處理
對於網站字體設置
一、移動端項目:
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
二、移動和pc端項目:
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
三、字體大小盡可能使用pt或者em,rem,代替px。
四、設置input裏面placeholder字體的大小 ::-webkit-input-placeholder{ font-size:10pt;}
五、解決字體在移動端比例縮小後出現鋸齒的問題:-webkit-font-smoothing: antialiased;
8、圓角設置
放一個圖片或者一個按鈕,設置圓角會比較美觀,設置圓角的值能夠用百分比,也能夠用em等單位。
element{
border: 1px solid #ccc;
-moz-border-radius: 百分比;
-webkit-border-radius: 百分比;
border-radius: 百分比;
}
9、邊距凹陷
一、像素邊框(例子:移動端列表的下邊框)
.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);
}
二、
與在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;
}
10、禁止內容
一、//禁止文本縮放
html {
-webkit-text-size-adjust: 100%;
}
二、移動端禁止選中內容
若是你不想用戶能夠選中頁面中的內容,那麼你能夠在css中禁掉:
.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
兼容IE6-9的寫法:onselectstart="return false;" unselectable="on"
11、滾動效果
12、快速回彈
快速回彈滾動
.xxx {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
PS:iScroll用過以後感受不是很好,有一些詭異的bug,這裏推薦另一個 iDangero Swiper,這個插件集成了滑屏滾動的強大功能(支持3D),並且還有回彈滾動的內置滾動條,官方地址:
http://www.idangero.us/sliders/swiper/index.php
十3、白色背景顏色搭配
十4、經常使用的移動端開發框架以及工具
框架
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 調色搭配
十5、動畫的處理
開啓硬件加速
解決頁面閃白
保證動畫流暢
.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加速
十6、消除閃爍
消除transition閃屏
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
十7、移動端取消touch高亮效果 在作移動端頁面時,會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素,默認都會在激活狀態時,顯示高亮框,若是不想要這個高亮,那麼你能夠經過css如下方法來禁止: .xxx { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }