Html5移动端页面布局通用模板暨移动端问题总结
最近的移动端项目终于告一段落了，其中遇到了不少问题，在此和大家总结分享。
首先，说一下结构。一般的手机页面大致可以分为五块：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
拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：
