Hybrid框架UI重構之路：五、前端那點事兒（HTML、CSS）

這裏講述在開發的過程中，一些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

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

總結

我並沒有寫開發的具體內容（太多東西，沒辦法幾篇文章講完，也沒必要，畢竟思路纔是正途），也就不多講，旨在介紹我開發的方式、方法、步奏，以及一點關鍵的前端問題。

本文爲原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址： http://www.cnblogs.com/lovesong/p/4297182.html

本文轉自海角在眼前博客園博客，原文鏈接： http://www.cnblogs.com/lovesong/p/4297182.html ，如需轉載請自行聯繫原作者

http://www.cnblogs.com/lovesong/p/4297182.html