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

時間 2019-11-19

標籤 hybrid 框架之路前端那點事兒 html css 欄目 Hybrid 简体版

原文原文鏈接

這裏講述在開發的過程當中，一些HTML、CSS的關鍵點。html

單頁模式的頁面結構

在單頁模式中，弱化HTML的概念，把HTML當成一個容器，BODY中顯示的主體內容纔是頁面，一個HTML容器中能夠存放1個或者多個頁面，每一個頁面放置於section中。而一個頁面（section）中必有主體內容（content），也有可能包含頭部內容、底部內容，甚至一些側滑菜單等。前端

因此，以咱們一般看到的一個移動應用的界面中包含了頂部Title和主體內容的頁面代碼以下：android

<!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之下，而且各自能夠顯示須要的內容。ios

也就是以下圖的一個結構：app

片斷頁面相對就簡單不少，以下代碼：框架

<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塊，從這裏看其餘頁面是很簡潔的。iphone

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