最近的移动端项目终于告一段落了，其中遇到了不少问题，在此和大家总结分享。

首先，说一下结构。一般的手机页面大致可以分为五块：head, content, foot,solidbar,dialog. 针对这种布局，在此提供一种方式，这种方式使用了css3的一些样式属性。代码如下：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Demo</title>

 <meta name="viewport" content="target-densitydpi=device-dpi,user-scalable=no" />

 <style type="text/css">

 body,header,footer{ margin: 0; padding: 0;}

 .ani{-webkit-transition:all 0.3s cubic-bezier(0,0.2,0.5,1) 0s;}

 .box{ display: -webkit-box; font-size: 60px;}

 .box-vertical{ -webkit-box-orient:vertical;}

 .box-horizontal{ -webkit-box-orient:horizontal;}

 .position{ position: absolute; height:100%;width: 100%;}

 .flex{ -webkit-box-flex:1;}

 .content{overflow:hidden;}

 .backdrop{ background: rgba(0,0,0,0.5); top:0; left:0;-webkit-box-pack: center;-webkit-box-align: center;}

 header,footer{ height: 200px; background-color: green;}

 .translate{ -webkit-transform: translate(-200px,0);}

 </style>

 </head>

 <body class="position box box-vertical">

     <header>

         This is Header

         <span id="toolBar">toolBar</span>

         <span id="showDialog">showDialog</span>

     </header>

     <div class="flex box content">

         <div class="flex box ani" id="cont">

             <div style="width:100%" class="box box-vertical">

                 <div class="ani" style="height:200px; background:red">123</div>

                 <div class="flex" style="background:#00f;overflow:auto">

                     <div style="height:5000px"></div>

                 </div>

             </div>

             <div style="width:200px; background:yellow">

                 2

             </div>

         </div>

     </div>

     <footer>

         This is Footer

     </footer>

     <div class="backdrop position box" id="dialog" style="display:none">

         <div style="height:200px; width:80%;background-color:red">

             This is dialog content

         </div>

     </div>

 <script>

     var toolBar = document.getElementById("toolBar"),

         cont = document.getElementById("cont"),

         dialog = document.getElementById("dialog"),

         showDialog = document.getElementById("showDialog");

     toolBar.onclick = function(){

         cont.classList.toggle("translate");

     }

     showDialog.onclick = function(){

         dialog.style.display = "-webkit-box";

     }

     dialog.onclick = function(){

         this.style.display = "none";

     }

 </script>

 </body>

 </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方法：

 onBeforeScrollStart : function(e) {

             var target = e.target;

             while(target.nodeType != 1)

             target = target.parentNode;

             if(target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')

                 e.preventDefault();

         }

　　最后一个问题，也是比较奇葩的。就是在一个元素上面绑定一个click事件的时候，竟然会响应两次！我提供的解决方案是打标记，等到一定的时间还原标记。大概思路如下：

 var obj = {

      dom:$("#test"),

      flag:true

 }

 obj.dom.click(function(){

    if(obj.flag){

      obj.flag = false;

     ...... // 需要执行的处理代码

   }

    setTimeout(function(){

      obj.flag = true;

   },500)

 })

　　这些问题，我也是第一次遇到过。由于本人水平有限，其中的缘由也都是猜想。如果有不对的地方，希望得到大家的指正！如果，您了解的更多，在此，我也希望得到您的指导！在此谢过！

有需要购置家用路由器和键盘鼠标的童鞋，不要忘记猛点宏正数码哦，在此欢迎！

转载请标明出处：http://www.cnblogs.com/callmesummer/p/3983877.html

拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：

Html5移动端页面布局通用模板暨移动端问题总结的更多相关文章

  1. HTML5新结构标签和移动端页面布局

    --------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.ar ...

  2. 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）

    在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)

  3. IT兄弟连 HTML5教程 和页面布局有关的CSS属性

    使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过 ...

  4. 电脑分辨率与pc端页面布局

    在电脑设置中选择:控制面板->外观和个性化->显示 可以设置页面的显示比例,原因是在1920*1080的分辨率下页面的图标就会变得比较小,方便用户看,这个功能就是把页面内容变大(默认是中等 ...

  5. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  6. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  7. sharepoint 2010 自定义页面布局

    在sharepoint开发中经常遇到 自定义网站栏.内容类型,页面布局和模板页也会遇到,遇到机会就相对比较小. 首先新建一个空的sharepoint项目: 1)创建网站兰: 修改SiteColumns ...

  8. 「小程序JAVA实战」小程序通用模板的使用（17）

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-17/ 小程序也为了页面增加了通用模板的功能,如何去理解一个通用的模板呢?模板的定义就是为了让我们的 ...

  9. CSS5:移动端页面(响应式)

    CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你还是PC端,就交给后端来做只有一些新闻站点 ...

随机推荐

  1. AVD启动不了 ANDROID_SDK_HOME is defined but could not find *.ini

    报错提示______________________________________________________________________ Starting emulator for AVD ...

  2. windows消息常量值

    WM_NULL = 0WM_CREATE = 1应用程序创建一个窗口WM_DESTROY = 2一个窗口被销毁WM_MOVE = 3移动一个窗口WM_SIZE = 5改变一个窗口的大小WM_ACTIV ...

  3. http断点续传原理

    断点续传一是断点,一续传. 断点是在下载时,将下载文件分多片,同时进行多片一起下载,如果任务被暂停,暂停的位置就是断点. 续传就是未完成的下载再次开始时,会从上次的断点继续传送. 在下载(或上传)过程 ...

  4. java web实现读取指定盘符下的图像（二）

    之前写了一篇文章是关于如何读取指定盘符下的图片,虽然功能可以实现,但是使用的是I/O流的方式,效率不高.现在发现还有一个更好的办法,使用也更加的方便. 我们知道,当我们的图片是放在tomcat下web ...

  5. 正则表达式，Regex类

    C#regex是正则表达式类用于string的处理,查找匹配的字符串.1,先看一个例子Regex regex=new Regex(@”OK“)://我们要在目标字符串中找到"OK" ...

  6. Objective-C文件和目录操作,IOS文件操作,NSFileManager使用文件操作

    http://blog.csdn.net/swingpyzf/article/details/15185767

  7. 不同频率下的pwm配置

    200k //PWM1 PWMPERDL1=0xb3; PWMPERDH1= 0x00; PWMCCNTL1=0x6B; PWMCCNTH1= ; PWMDBDY1=0x2B; //死区延时计时器 / ...

  8. C++中使用stringstream简化类型转换

    C++标准库中的<sstream>提供了一个stringstream,以前基本没用过,突然发现很好用(^-^)V 参见 http://www.cplusplus.com/reference ...

  9. 视差滚动（Parallax Scrolling）效果的原理与实现

    视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点:    1)直观的设计,快速的响应速度,更合适运用于单页面    2)差异滚动 分层视差    页面上很多的 ...

  10. python安装——Windows平台

    刚刚申请博客,第一次写随笔,记录下自己最近的学习情况,希望自己能够不断的学习,不断的丰富自己~ 最近刚开始学python,记录一下,希望大家相互学习,批评指正~ 1.下载python:https:// ...