一，開篇概述
Hi，大家好！大熊君又和大家見面了，從這篇文章開始我要和大家聊聊移動開發的話題，這部分文章共8季，分別從不同角度來講解什么是移動開發？移動開發涉及到什么方面的技術點以及移動開發中的常見問題和疑難雜症。
我們指的移動開發，實際上就是使用web技術------它主要包含“h5，css3，javascript”等技術，通過（Phonegap / Cordova-一個跨平台的並且已經有一整套相關生態系統包括工具，論壇，開發者。你能通過它來利用HTML5的API以及原生API。
開發出一個真正的移動應用。此平台也遵從HTML5規范以協助web應用的轉化。）在跨平台性，可移植性方面，具有無可比擬的優勢。
背景了解：下面是一張信息圖，為我們詳細對比了純web（HTML5），混合App（Hybrid）和原生App（Native）三種移動開發路線的差異。
一些重點差異：
開發難度移動web和混合App開發難度對於web開發者來說相對較低，而且可以充分利用現有的web開發工具和工作流程
發布渠道和更新方式------混合App可以在應用商店App Store發布，但可以自主更新，而原生App的更新必須通過應用商店App
移動設備本地API訪問------混合App可以通過JavaScript API訪問到移動設備的攝像頭，GPS，而原生App可以通過原生編程語言訪問設備所有功能。
跨平台和可移植性------基於瀏覽器的移動web最好的可移植性和跨平台表現；混合App也能節省跨平台的時間和成本，只需編寫一次核心代碼就可部署到多個平台，而原生App的跨平台性能
搜索引擎友好------只有移動web對搜索引擎友好，可與在線營銷
貨幣化------混合App除廣告外，還支持付費下載及程序內購買；原生App的程序內購買金額2012年首次超過
消息推送------只有混合App和原生App支持消息推送，這能增加用戶忠誠度。
二，進入移動開發話題
就基於web技術的移動應用開發來說，其實本質是不變的，與PC端開發很類似，所以說換湯不換葯，不管什么類型的應用，必須有一個友好的界面交互，首先就是布局的問題，移動布局和傳統的基於PC
瀏覽器布局方式還是有區別的，所以今天就從布局說起，由淺入深逐步提高。好了進入重點部分，先看一個小栗子，如下好比這樣：
我們分為三步驟去做這件事：
（1），准備測試虛擬設備，我這里用的是chrome自帶的小工具
（2），建立一個html頁面，如“bb.html”bb.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
6 <meta content="yes"name="apple-mobile-web-app-capable"/>
7 <meta content="black"name="apple-mobile-web-app-status-bar-style"/>
8 <meta name="format-detection"content="telphone=no"/>
9 <title>大熊君移動開發之旅</title>
10 <link rel="stylesheet" href="bb.css" media="all">
11 </head>
12 <body>
13 <header class="header">大熊君移動開發之旅</header>
14
15 <div class="wrap-page">
16 <div class="page">
17 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●))
18 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 19 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 20 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 21 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 22 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 23 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 24 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 25 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 26 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 27 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 28 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 29 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 30 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 31 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 32 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 33 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 34 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 35 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 36 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 37 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 38 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 39 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 40 <p>哈哈哈，我是大熊君{{bb}} (●'◡'●)) 41 </div> 42 </div> 43 <footer class="footer">如果大家喜歡，推薦哦~~~</footer> 44 </body> 45 </html>
css代碼如下：
1 .header,.footer,.wrap-page{
2 position:absolute;
3 left:0;
4 right:0;
5 color:#f8f8f8;
6 }
7 .header,.footer{
8 height:44px;
9 background-color: #fff;
10 text-align: center;
11 z-index:900;
12 line-height:44px;
13 background:#C10066;
14 }
15 .header{
16 top: 0;
17 border-bottom: 1px solid #f00;
18 }
19 .footer{
20 bottom: 0;
21 border-top: 1px solid #f00;
22 }
23 .wrap-page{
24 top: 44px;
25 bottom: 44px;
26 overflow-y:auto;
27 -webkit-overflow-scrolling:touch;
28 color:#333;
29 }
30 .page{
31 padding: 10px;
32 }
33 .page p{
34 margin-bottom: 10px;
35 }
以下是實際效果，如下：
三，分析一下
1，
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> // 上面的代碼依次表示設置寬度為設備的寬度，默認不縮放，不允許用戶縮放（即禁止縮放），在網頁加載時隱藏地址欄與導航欄（ios7.1新增）。
2，
width – viewport的寬度 height – viewport的高度 initial-scale – 初始的縮放比例 minimum-scale – 允許用戶縮放到的最小比例 maximum-scale – 允許用戶縮放到的最大比例 user-scalable – 用戶是否可以手動縮放
3，
-webkit-overflow-scrolling:touch 來實現滾動，當然對於不支持的，也可以使用“iscroll”來兼容，而iscroll同樣也需要一個固定高度的容器來包裹可滾動的內容。
小結一下：移動端布局很多都采用Css3提供的屬性支持，如果不兼容或者性能不好可以通過js做兼容處理，具體布局時遵循三個原則，1------使用百分比方式，不論寬高還是字體大小是一樣處理的方式。
2------使用相對布局方式處理。3-------設置meta標簽進行移動應用的一些預設處理。
（四），最后總結
（1），使用百分比方式合理布局。
（2），使用相對布局方式處理。
（3），不多練習不斷嘗試多種布局體驗，總之空間有限想法無限。
哈哈哈，本篇結束，未完待續，希望和大家多多交流夠溝通，共同進步。。。。。。呼呼呼……(*^__^*)