转载

Hybird框架UI重构之路：五、前端那点事儿（HTML、CSS）

<!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

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); }