苏州企业建站程序,社交网络推广方法,app开发网站开发教程,网站建设 源代码归属上文回顾 #xff1a;Hybird框架UI重构之路#xff1a;四、分而治之 这里讲述在开发的过程中#xff0c;一些HTML、CSS的关键点。 单页模式的页面结构在单页模式中#xff0c;弱化HTML的概念#xff0c;把HTML当成一个容器#xff0c;BODY中显示的主体内容才是页面#…上文回顾 Hybird框架UI重构之路四、分而治之 这里讲述在开发的过程中一些HTML、CSS的关键点。 单页模式的页面结构 在单页模式中弱化HTML的概念把HTML当成一个容器BODY中显示的主体内容才是页面一个HTML容器中可以存放1个或者多个页面每个页面放置于section中。而一个页面section中必有主体内容content也有可能包含头部内容、底部内容甚至一些侧滑菜单等。 所以以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如下 !DOCTYPE HTML
html langen-US
head
meta http-equivContent-Type contenttext/html;charsetUTF-8 /
meta nameformat-detection contenttelephoneno /
meta nameviewport contentwidth480,user-scalableno /link relstylesheet hrefcss/bingotouch.css /
link relstylesheet hrefcss/app.css /!-- 函数库 --
script srcjs/cordova.js/script
script srcjs/zepto.js/script
script srcjs/iscroll.js/script
script srcjs/baiduTemplate.js/script
script srcjs/bingotouch.js/script
script srcjs/app/app.js/scripttitleBingoTouch/title
/head
bodydiv idsection_containersection idindex_section classactivediv classheader data-fixedtopdiv classtitle row-boxdiv classbox-left/divdiv classspan1h1首页/h1/divdiv classbox-right/div/div/divdiv classcontenth1欢迎使用BingoTouch/h1/divdiv classfooter data-fixedbottom/div/section/div
/body
/html 这里可以看到单页的基本结构是以Section为单个页面的容器页面中显示的标题导航header和主体内容content都位于Section之下并且各自可以显示需要的内容。 也就是如下图的一个结构 片段页面相对就简单很多如下代码 section iddemo_sectiondiv classheader data-fixedtopdiv classtitle row-boxdiv classbox-left/divdiv classspan1h1Demo/h1/divdiv classbox-right/div/div/divdiv classcontenth1欢迎使用BingoTouch/h1/divdiv classfooter data-fixedbottom/div
/section 页面片段也即是主页面里面的section块从这里看其他页面是很简洁的。 viewport 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 widthdevice-width,initial-scale1,user-scalableno,target-densitydpi 240;
} else {if(userAgent.match(/ipad/i)){viewport width640,user-scalableno;}else if(userAgent.match(/iphone os/i) iphone os){viewport width480,user-scalableno;}
}
//add view
if ($(meta[nameviewport]).length 0) {$(meta[nameviewport]).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 总结 我并没有写开发的具体内容太多东西没办法几篇文章讲完也没必要毕竟思路才是正途也就不多讲旨在介绍我开发的方式、方法、步奏以及一点关键的前端问题。 本文为原创文章转载请保留原出处方便溯源如有错误地方谢谢指正。 本文地址 http://www.cnblogs.com/lovesong/p/4297182.html 转载于:https://www.cnblogs.com/lovesong/p/4297182.html
