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

首先,说一下结构。一般的手机页面大致可以分为五块: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. SQL SERVER数据库服务操作

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. 吸血鬼数字算法参考 -- javascript版本

    // 吸血鬼数字 java编程思想 第四章 75页 练习10 for (var i = 10; i <= 99; i++) { for (var j = i + 1; j < 99; j+ ...

  3. Java如何获取当前的jar包路径以及如何读取jar包中的资源

    写作业的时候要输出一个record.dat文件到jar包的同级目录,但是不知道怎么定位jar包的路径.百度到的方法不很靠谱,所以在这里记录一下. 一:使用类路径 String path = this. ...

  4. MFC线程(三):线程同步事件(event)与互斥(mutex)

    前面讲了临界区可以用来达到线程同步.而事件(event)与互斥(mutex)也同样可以做到. Win32 API中的线程事件 HANDLE hEvent = NULL; void MainTestFu ...

  5. PHP学习路上的一点心得

    继学些了java后,接触php的项目后发现 php真的也是很强大的一门语言,这只是一篇回想,想到什么就写什么把,大家随便看看. 1.php其实无需等待,一般的改完代码后直接刷新页面即可,不需要像jav ...

  6. WordPress插件开发记录

    1.a标签在新的网页中打开内容     <a href="网址" target="_blank"></a>      2.PDO的$re ...

  7. C语言解析日志,存储数据到伯克利DB 2

    #编译程序 gcc -o historydb historydb.c -ldb #将2013年8月9日的用户记录写入数据库 (程序自动识别新用户入库,跳过老用户) ./historydb -f .us ...

  8. BIN和HEX文件的区别

    HEX文件和BIN文件是我们经常碰到的2种文件格式.下面简单介绍一下这2种文件格式的区别: 1.HEX文件是包括地址信息的,而BIN文件格式只包括了数据本身.在烧写或下载HEX文件的时候,一般都不需要 ...

  9. explorer.exe进程简单介绍

    explorer.exe是Windows程序管理器或者Windows资源管理器,它用于管理Windows图形壳,包括开始菜单.任务栏.桌面和文件管理.不过也发现有大量的恶意病毒木马插入到explore ...

  10. Buffer lock

    buffer lock    Oracle 提供非常精确,有效的Row Level Lock机制,多个用户同时修改数据时,为了保护数据. 以块为单位挂起锁的情况不会发生,但这不太正确. 以块为单位的锁 ...