標籤：android style http io os ar 使用 java for
最近隨著 Apple iOS 和 Android 平台的盛行，一個新的名詞 WebApp 也逐漸火了起來，這裡我也趁著熱潮做一個關於 WebApp 系列的學習筆記，分享平時的一些研究以及項目中的經驗，在現階段研究對象暫時限定為 iOS 平台(iPhone/iPad/iPod touch)，隨後會擴充到 Android 平台。
對於 WebApp，我的理解是：它一個基於 Web 形式的應用程式，是針對智能手機、平板電腦等高效能行動裝置做了特別最佳化的網頁或網站，它相對原生應用程式(Native App)優勢在於：
下面開始逐步學習、探討如何打造一個適合移動終端的 WebApp。
一、準備工作：搭建一個舞台：首先我們已經有一個效能不錯的平台——基於 Webkit 核心的 Safari 瀏覽器(這裡指的是 iOS 中的移動版 Safari，下同)，但這還不夠，雖說是移動版瀏覽器，但在未設定、最佳化前，Safari 對頁面的渲染方式更多的是為方便瀏覽 PC 網頁而最佳化，這就難以體現 WebApp 的特點，所以我們必須通過一些設定來搭建一個屬於 WebApp 的“舞台”。
PS：下面列舉的代碼都應放置在 HTML 文檔的<head>標籤內。
當我們在 Safari 中開啟一個網站時，預設情況下瀏覽器會對網頁進行縮放顯示，目的是讓 PC 頁面能夠完全展示在小螢幕裝置中，而這種縮放功能會嚴重影響專為行動裝置螢幕尺寸設計的 WebApp 的體驗，所以需要通過以下代碼來關閉縮放：
<meta name = "viewport" content = "user-scalable=no, width=device-width">
設定viewpoint前後效果對比：
簡單瞭解下viewpoint的屬性：
user-scalable – 使用者是否可以手動縮放；
width – 定義viewport寬度(預設為980像素) ，例子中值為device-width是指設定為裝置顯示寬度；
height – viewport的高度；
initial-scale – 初始的縮放比例 (範圍從 0 到10)；
minimum-scale – 允許使用者縮放到的最小比例；
maximum-scale – 允許使用者縮放到的最大比例；
有關viewpoint更詳細的知識請移步：viewport不權威指南
Safari 瀏覽器有一個“添加到主畫面”的功能，使用者可以像儲存書籤一樣把一個網站添加到主畫面，下次使用者直接點擊主畫面上的表徵圖就能進入網站。
這個功能不僅方便使用者快速存取我們的網站，而且也使我們的 WebApp 更像一個原生應用，設定代碼：
<link rel="apple-touch-icon" href="icon.png" />
iOS 系統會自動將表徵圖產生具有高光、圓角和陰影製作效果：
如果你不想要系統自動產生的效果，可以增加rel="apple-touch-icon-precomposed"屬性：
<link rel="apple-touch-icon-precomposed" href="icon.png" />
因為 iOS 解析度，所以 icon.png 圖片的尺寸也各不相同，我們可以通過sizes屬性來分別定義，iOS 系統會自動擷取向匹配的圖片：
<!--預設為 57x57 像素--><link rel="apple-touch-icon" href="touch-icon-iphone.png" /><!--iPad 1 72x72 像素--><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><!--iPhone 4 114x114 像素--><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
系統會自動選取網站title，作為名稱顯示在主屏表徵圖下方，最長顯示13字元。
為了在主屏達到最好的顯示效果，title最好限制在六個中文長度內，超長的內容會被隱藏：
當我們點擊主屏表徵圖開啟瀏覽器進入 WebApp 時，預設情況下 Safari 還是會顯示頂部導覽列以及底部工具列，但這不是我們想要的結果，它們不僅不美觀還減少了顯示面積，所以可以用以下程式碼後置它們，讓 WebApp 像原生應用一樣全螢幕顯示：
<meta name="apple-mobile-web-app-capable" content="yes" />
iPad 中的全螢幕顯示效果，導航和工具列已經沒有了：
註：想達到全螢幕顯示的效果必須通過主屏的表徵圖開啟網站，直接在Safari輸入URL是不行的。
系統狀態列是 iOS 頂部顯示電訊廠商、WIFI、時間的部分，它無法隱藏，但可以設定灰、黑兩種風格，設定代碼如下：
<meta name="apple-mobile-web-app-status-bar-style" content="grey" /><meta name="apple-mobile-web-app-status-bar-style" content="black" />5.啟動畫面設定：
當使用者點擊主屏表徵圖開啟 WebApp 時，系統會展示啟動畫面，在未設定情況下系統會預設顯示該網站的首頁，當然這個體驗不是很好，所以我們需要通過以下代碼來自訂啟動畫面：
<link rel="apple-touch-startup-image" href="Startup.png" />
[2012.11.20]更新
與啟表徵圖類似，根據 iOS 裝置的解析度，其啟動畫面的圖片尺寸也各不相同：
iPhone 3GS(及以前機型)：320×460 像素
iPhone 4、4S：640×920 像素
iPhone 5：1096×640 像素
iPad 1、2：768×1004 像素
New iPad：–
iPad mini —
註：如果圖片尺寸不對將無法顯示。
[2011.2.1]更新
如果想讓一個 WebApp 在 iPhone 和 iPad 中同時具有啟動畫面，我們可以藉助 Javascript 指令碼來完成，通過判斷裝置navigator.userAgent資訊，來更改href的值指向對應的圖片路徑：
//jQueryvar ua = navigator.userAgent.toLowerCase();if (ua.match(/iPad/i)=="ipad") { $("link[rel=apple-touch-startup-image]").attr("href","images/startup_ipad.png");}其他細節設定：
屏蔽iPhone下的撥號連結
iPhone 下會自動將連串數字轉換為撥號超連結，如果沒特別的需要還是將這個功能屏蔽為好：
<meta name="format-detection" content="telephone=no"/>
至此一個專屬於 WebApp 的“舞台”就初步搭建完成了，當然這裡也留下很多疑問，比如說iPhone與iPad解析度差距很大，那麼如何為它們分別設定啟動畫面、配置樣式以及橫屏豎屏的問題等，這些細節將在下一章討論。
打造移動終端的 WebApp（一）：搭建一個舞台
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
