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

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

时间: 2024-11-05 11:55:29

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

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

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r

移动端页面布局

移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C 2.Hybrid App 混合型app手机应用程序 混合使用原生的程序和html5页面开发的手机应用 3.Web App 基于Web的app手机应用程序 完全使用html5页面加前端js框架开发的手机应用 二.Viewport视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px

移动端页面布局的那些事儿

移动端页面布局的那些事儿 http://www.xiaoxiangzi.com/Programme/CSS/4298.html 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport.如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其

超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)

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

移动端:移动端页面布局

移动端页面布局 一. 水平居中 行内元素     text-align: center; 块级元素 1 /* 可以采取绝对定位的方式实现 */ 2 .center { 3 width: 960px; 4 position: absolute; 5 left: 50%;(25%) 6 margin-left: -480px; 7 } 二. 自适应块级元素水平居中 前面介绍的块级元素居中要求有固定宽度,对于自适应的块级元素就无能为力了 1 /* 借助css3的变形属性Transform来完成 */

6.0 移动端页面布局

移动端app分类 1.Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C 2.Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用 3.Web App 基于Web的app手机应用程序完全使用html5页面加前端js框架开发的手机应用 Viewport 视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为

移动端与PC端页面布局区别

视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小.这样会让网页不容易观看,可以用 meta 标签,name=“viewport ” 来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小. 设置方法如下( 快捷方式:meta:vp + tab ): <head> ...... <meta

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

对于动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高设置 汝甚吊

移动端页面rem布局的关键点。

移动端页面布局的关键点. 第一.rem布局: 1,必须写 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compa