Html5移动端页面布局通用模板暨移动端问题总结
最近的移动端项目终于告一段落了,其中遇到了不少问题,在此和大家总结分享。
首先,说一下结构。一般的手机页面大致可以分为五块: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
拿出手机,打开支付宝扫一扫,再小的力量,也是一种支持:
最新文章
- java读取项目根路径下和任意磁盘位置下的properties文件
- (转载)MongoingDB常用操作
- V4L2读取摄像头程序流程【转】
- ASP.NET页面刷新的实现方法总结
- [总结]RTMP流媒体技术零基础学习方法
- SVN的项目管理
- mysql的python api
- nginx之 nginx + tomcat + redis 负载均衡且session一致性
- 内核调试神器SystemTap — 简介与使用(一)
- Python调用ansible API系列(三)带有callback的执行adhoc和playbook
- UVA1449 Dominating Patterns
- Elasticsearch 学习之子聚集过滤
- Fiddler抓包学习——https请求的抓取
- Gitlab备份和恢复操作记录
- 使用GPStracker自建卫星定位跟踪平台
- VPS采用的几种常见技术(OVZ、Xen、KVM)介绍与对比
- C#系统登录随机验证码生成及其调用方法
- web端权限维持【好文】
- [Umbraco] DocumentType设计指南
- (原创)结构体自动化转为char数组的实现
热门文章
- HTMl5的sessionStorage和localStorage(转)
- asp.net读取文件
- Oracle decode函数 除数为零
- .net 开发定时执行的windows服务
- [转]详解AppDelegate/UIApplication
- a标签# 和javascript:;的区别
- Ext4.0.7使用Ext.grid.ColumnModel报错:TypeError: Ext.grid.Model is not a constructor
- DJANGO用户名认证一例
- ImageMaigck不支持中文路径的问题
- UML--核心元素之参与者Actor