最近的移動端項目終於告一段落了，其中遇到了不少問題，在此和大家總結分享。
首先，說一下結構。一般的手機頁面大致可以分為五塊：head, content, foot,solidbar,dialog. 針對這種布局，在此提供一種方式，這種方式使用了css3的一些樣式屬性。代碼如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo</title> 6 <meta name="viewport" content="target-densitydpi=device-dpi,user-scalable=no" /> 7 <style type="text/css"> 8 body,header,footer{ margin: 0; padding: 0;} 9 .ani{-webkit-transition:all 0.3s cubic-bezier(0,0.2,0.5,1) 0s;} 10 .box{ display: -webkit-box; font-size: 60px;} 11 .box-vertical{ -webkit-box-orient:vertical;} 12 .box-horizontal{ -webkit-box-orient:horizontal;} 13 .position{ position: absolute; height:100%;width: 100%;} 14 .flex{ -webkit-box-flex:1;} 15 .content{overflow:hidden;} 16 .backdrop{ background: rgba(0,0,0,0.5); top:0; left:0;-webkit-box-pack: center;-webkit-box-align: center;} 17 header,footer{ height: 200px; background-color: green;} 18 .translate{ -webkit-transform: translate(-200px,0);} 19 </style> 20 </head> 21 22 <body class="position box box-vertical"> 23 <header> 24 This is Header 25 <span id="toolBar">toolBar</span> 26 <span id="showDialog">showDialog</span> 27 </header> 28 <div class="flex box content"> 29 <div class="flex box ani" id="cont"> 30 <div style="width:100%" class="box box-vertical"> 31 <div class="ani" style="height:200px; background:red">123</div> 32 <div class="flex" style="background:#00f;overflow:auto"> 33 <div style="height:5000px"></div> 34 </div> 35 </div> 36 <div style="width:200px; background:yellow"> 37 2 38 </div> 39 </div> 40 </div> 41 <footer> 42 This is Footer 43 </footer> 44 <div class="backdrop position box" id="dialog" style="display:none"> 45 <div style="height:200px; width:80%;background-color:red"> 46 This is dialog content 47 </div> 48 </div> 49 <script> 50 var toolBar = document.getElementById("toolBar"), 51 cont = document.getElementById("cont"), 52 dialog = document.getElementById("dialog"), 53 showDialog = document.getElementById("showDialog"); 54 toolBar.onclick = function(){ 55 cont.classList.toggle("translate"); 56 } 57 showDialog.onclick = function(){ 58 dialog.style.display = "-webkit-box"; 59 } 60 dialog.onclick = function(){ 61 this.style.display = "none"; 62 } 63 </script> 64 </body> 65 </html>
感興趣的同學，可以在webkit內核的瀏覽器下測試。這里要提醒大家注意的幾個css3屬性：display:-webkit-box; -webkit-box-flex:1;-webkit-box-pack: center;-webkit-box-align: center;這幾個屬性的作用希望大家可以理解清楚。
下面就來總結一下上一個項目中遇到的問題及解決方案。
先來說說點透吧。就是A層蓋在B層上面，理想的效果就是A層遮罩B層。但是，在安卓4.2的設備上面，卻蓋不住。當你點擊A層的時候，B層綁定的事件一樣會觸發。這個問題的解決方案，是引用了一個叫做fastclick的js解決的。
接着遇到的就是原生滾動在安卓4.2上面失效。這個問題很蛋疼！剛開始的時候，我以為是4.2的系統本來就不支持原生滾動，但是后來經過測試，我發現我的猜想是錯誤的。在note3上面原生滾動很順暢，之所以我們的頁面原生滾動失效，我猜想應該是布局的問題！因為以前的布局，他們大多采用了absolute fixed的定位方式。上面提供的布局代碼，在4.2系統上面測試，是沒有問題的。
接着上面的一個問題說吧。由於布局問題造成原生滾動失效，項目后期改布局已經是不可能的了，所以我們就引入的iscroll插件。但是這個插件也有問題，在4.2的系統上，竟然出現了輸入框獲得焦點，鍵盤不彈出的問題。解決的方案是用如下代碼復寫onBeforeScrollStart方法：
1 onBeforeScrollStart : function(e) { 2 var target = e.target; 3 while(target.nodeType != 1) 4 target = target.parentNode; 5 if(target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') 6 e.preventDefault(); 7 }
最后一個問題，也是比較奇葩的。就是在一個元素上面綁定一個click事件的時候，竟然會響應兩次！我提供的解決方案是打標記，等到一定的時間還原標記。大概思路如下：
1 var obj = { 2 dom:$("#test"), 3 flag:true 4 } 5 obj.dom.click(function(){ 6 if(obj.flag){ 7 obj.flag = false; 8 ...... // 需要執行的處理代碼 9 } 10 setTimeout(function(){ 11 obj.flag = true; 12 },500) 13 })
這些問題，我也是第一次遇到過。由於本人水平有限，其中的緣由也都是猜想。如果有不對的地方，希望得到大家的指正！如果，您了解的更多，在此，我也希望得到您的指導！在此謝過！
有需要購置家用路由器和鍵盤鼠標的童鞋，不要忘記猛點宏正數碼哦，在此歡迎！
轉載請標明出處：http://www.cnblogs.com/callmesummer/p/3983877.html
拿出手機，打開支付寶掃一掃，再小的力量，也是一種支持：
