Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）
上文回顾 ：Hybird框架UI重构之路：四、分而治之
这里讲述在开发的过程中，一些HTML、CSS的关键点。
在单页模式中，弱化HTML的概念，把HTML当成一个容器，BODY中显示的主体内容才是页面，一个HTML容器中可以存放1个或者多个页面，每个页面放置于section中。而一个页面（section）中必有主体内容（content），也有可能包含头部内容、底部内容，甚至一些侧滑菜单等。
所以，以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如下：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=480,user-scalable=no" /> <link rel="stylesheet" href="css/bingotouch.css" />
<link rel="stylesheet" href="css/app.css" /> <!-- 函数库 -->
<script src="js/cordova.js"></script>
<script src="js/zepto.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/baiduTemplate.js"></script>
<script src="js/bingotouch.js"></script>
<script src="js/app/app.js"></script> <title>BingoTouch</title>
</head>
<body>
<div id="section_container">
<section id="index_section" class="active">
<div class="header" data-fixed="top">
<div class="title row-box">
<div class="box-left">
</div>
<div class="span1">
<h1>首页</h1>
</div>
<div class="box-right">
</div>
</div>
</div>
<div class="content">
<h1>欢迎使用BingoTouch</h1>
</div>
<div class="footer" data-fixed="bottom">
</div>
</section>
</div>
</body>
</html>
这里可以看到单页的基本结构是以Section为单个页面的容器，页面中显示的标题导航header和主体内容content都位于Section之下，并且各自可以显示需要的内容。
也就是如下图的一个结构：
片段页面相对就简单很多，如下代码：
<section id="demo_section">
<div class="header" data-fixed="top">
<div class="title row-box">
<div class="box-left">
</div>
<div class="span1">
<h1>Demo</h1>
</div>
<div class="box-right">
</div>
</div>
</div>
<div class="content">
<h1>欢迎使用BingoTouch</h1>
</div>
<div class="footer" data-fixed="bottom">
</div>
</section>
页面片段也即是主页面里面的section块，从这里看其他页面是很简洁的。
viewport这东西不详细描述，我只是被整得快疯了，几个属性width、height、initial-scale、minimum-scale、maximum-scale、user-scalable。
ios : 在ios上很正常，设啥就是啥。
android : 在android上千奇百怪，简直是“茅坑里的石头”。尽管网上很多的文章对viewport都有阐述，但所写的描述、公式、示例没有一个能说对（我有用不同手机测试过），都没能完全说明白，都是对一点错一点，似对似错。而公司也没有人能好好说明它，之后我测试过，当测试到第5个机型就测不下去了，都不同各异，没有共同的特点，只能暂停下来（做其他事，测试事情先延后）。
现在使用的设置viewport的脚本在已测试过的机型都没有问题，所以暂不深究了,代码如下。
var viewport = "";
var userAgent = navigator.userAgent.toLowerCase(); if (/android (\d+\.\d+)/.test(userAgent)) {
viewport ="width=device-width,initial-scale=1,user-scalable=no,target-densitydpi =240";
} else {
if(userAgent.match(/ipad/i)){
viewport = "width=640,user-scalable=no";
}else if(userAgent.match(/iphone os/i) == "iphone os"){
viewport = "width=480,user-scalable=no";
}
}
//add view
if ($("meta[name='viewport']").length > 0) {
$("meta[name='viewport']").attr("content", viewport);
} else {
var element = document.createElement('meta');
element.name = "viewport";
element.content = viewport;
var head = document.getElementsByTagName('head')[0];
head.appendChild(element);
}
PS：对于不理解东西，我不喜欢只一对一解决，例如某个机型的viewport设置有问题，设置某些属性就可以了，但可能不知为什么。我是希望能明白本质原因，以后可以做到举一反三，才是我想的。另外，如果有人明白viewport且做过测试（这点很重要），能否告诉我你的理解，求交流。
扁平化不是新的东西，目前很多公司的项目都是渐变的风格，主要是体现是在header、footer、button等一些控件。而扁平化也仅仅是将渐变的效果去掉，并没有什么特别。
图标有两种，一种是图片图标，一种是字体图标。
我有一篇文章有详细介绍：http://www.cnblogs.com/lovesong/p/4115991.html
Hybrid框架UI重构之路：五、前端那点事儿（HTML、CSS）的更多相关文章
- Hybrid框架UI重构之路：六、前端那点事儿（Javascript）
上文回顾 :Hybird框架UI重构之路:五.前端那点事儿(HTML.CSS) 这里讲述在开发的过程中,一些JS的关键点. 换肤 对于终端的换肤,我之前一篇文章有说了我的想法. 请查看:http:// ...
- Hybrid框架UI重构之路：四、分而治之
上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js. ...
- Hybrid框架UI重构之路：三、工欲善其事，必先利其器
上文回顾:Hybird框架UI重构之路:二.事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : ...
- Hybrid框架UI重构之路：二、事出有因
上文回顾:Hybird框架UI重构之路:一.师其长技以自强 一切的重构都是有原因的,或许为了更快速度.更好体验.更快捷开发等,于是就有了自己的开发目标,简单看看未重构前UI("中国移动式&q ...
- Hybrid框架UI重构之路：一、师其长技以自强
这两年在支撑公司的Hybrid框架的运维发展,让人确认这种移动开发方式确实是一条不错的路.混合应用这种开发方式降低开发难度,极大的提高开发效率,最重要的一点效果可以接近原生应用.框架的本身是需要持续不 ...
- 移动端前端框架UI库
移动端前端框架UI库(Frozen UI.WeUI.SUI Mobile) Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github. ...
- quickhybrid】如何实现一个Hybrid框架
章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...
- 【quickhybrid】架构一个Hybrid框架
前言 虽然说本系列中架构篇是第一章,但实际过程中是在慢慢演化的第二版中才有这个概念, 经过不断的迭代,演化才逐步稳定 明确目标 首先明确需要做成一个什么样的框架? 大致就是: 一套API规范(统一An ...
- 【quickhybrid】如何实现一个Hybrid框架
章节目录 [quickhybrid]如何实现一个跨平台Hybrid框架 [quick hybrid]架构一个Hybrid框架 [quick hybrid]H5和Native交互原理 [quick hy ...
随机推荐
- 漫谈可视化Prefuse（四）---被玩坏的Prefuse API
这个双12,别人都在抢红包.逛淘宝.上京东,我选择再续我的“漫谈可视化”系列(好了,不装了,其实是郎中羞涩...) 上篇<漫谈可视化Prefuse(三)---Prefuse API数据结构阅读有 ...
- Zip文件中文乱码问题解决方法(MAC->Windows)
前言: 最近收到的ZIP交互原型,打开查看中文一堆乱码.主要是产品都是高大上啊,用的都是MAC,咱酷毙用的Windows,话说安卓APP,你用MAC搞啥啊.可恨的压缩用的是zip,不是rar之类的.为 ...
- SharedPreferences 详解（多进程，存取数组解决方案）
一.SharedPreferences基本概念 文件保存路径:/data/data/<包名>/shared_prefs目录下目录下生成了一个SP.xml文件 SharedPreferenc ...
- 探秘重编译（Recompilations）（2/2）
在上一篇文章里,我讨论了使用临时表如何引起SQL Server里的重编译.在文章最后我提到,今天这篇文章我会聚焦表变量(Table Variables)的更多信息,它可以避免重编译的昂贵开销.我们来详 ...
- 功能齐全并且比较时髦的Jquery通用开源框架之【ejq.js】
简介 ejq是一款非常小巧的JS工具库,未压缩才50K,在jquery的基础上对jquery缺失部分作了很好的弥补作用. 优点: 1.具有内置的模板解析引擎语法和angularjs相近减少学习成本 2 ...
- SpringMVC详细示例
一.SpringMVC基础入门,创建一个HelloWorld程序 0.框架结构 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于springmvc的配置 < ...
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- dp or 贪心 --- hdu : Road Trip
Road Trip Time Limit: 1000ms, Special Time Limit:2500ms, Memory Limit:65536KB Total submit users: 29 ...
- 图论 --- spfa + 链式向前星 (模板题) dlut 1218 : 奇奇与变形金刚
1218: 奇奇与变形金刚 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 130 Solved: 37[Submit][Status][Web Boa ...
- 开源的即时通讯框架 (endv.cn) (一)
先实现几个常用基本功能, 1.富文本编辑器.文字的发送与接收 2.表情选择.插入.发送.读取 3.截图的插入.发送.接收 4.视频的获取.发送.接收 5.内存垃圾回收 客户端模拟服务端发送与接收 源码 ...