原文出處：http://adamlu.com/?p=344
編寫Iphone Web App的三個主要技術是HTML, CSS, Javascript，不需要在Iphone上安裝，也不要用Objective-C來寫，所以對於前端來說算是比較容易上手。相對於Native App來說，Web App的優點是開發週期比較快而且可以運行在任何Web瀏覽器中並且開發不只是在Mac OS上，缺點是你不可以訪問Iphone的一些硬體特性而且很難實現一些進階的UI效果。
有一些需要注意的地方整理了一下：
1.準備一個Iphone的樣式表
<link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only screen and (max-width: 480px)” />
2.控制頁面的縮放，如果不指定的話Iphone會認為你的網頁寬度為950px
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
3.添加Home頁表徵圖，如果使用者要添加你的Web App到Home頁的捷徑的話，需要指定一個ICON，有兩種
<link rel=”apple-touch-icon” href=”myCustomIcon.png” />
<link rel=”apple-touch-icon-precomposed” href=”myCustomIcon.png” />
4.全螢幕模式
<meta name=”apple-mobile-web-app-capable” content=”yes” />
5.狀態列
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
6.自訂啟動圖片，這個png圖片的尺寸是320px X 460px
<link rel=”apple-touch-startup-image” href=”myCustomStartupGraphic.png” />
7.使用JQTouch來實現動畫
JQTouch是一個基於Jquery的手機Web開發的外掛程式，：http://jqtouch.com/
8.使用HTML5來實現用戶端資料存放區
HTML5提供了LocalStorage, SessionStorage和用戶端資料庫
9.使用HTML5來實現離線應用
離線應用需要在伺服器端存放一個manifest檔案，然後<html manifest=”demo.manifest”>，如果你在使用Apache或其它的Web伺服器，需要添加一個.htaccess檔案到你的網站目錄，裡面的內容為：AddType text/cache-manifest .manifest
manifest的檔案格式如下：
CACHE MANIFEST
index.html
scripts/demo.js
styles/screen.css
NETWORK:———–>FALLBACK:
logo.jpg ————>logo.jpg offline.jpg
NETWORK表示的是線上檔案白名單，如果你離線的話，這個圖片不會顯示，如果想讓其它圖片替換這個圖片的話，可以改成箭頭所示。
10.使用PhoneGap讓你的Web App變成Native App
PhoneGap是一個串連Web應用程式和手機裝置橋樑的開源開發工具。
瞭解更多請閱讀“Building iPhone Apps with HTML, CSS, and JavaScript”這本書以及雲謙的“iPhone 上的Web前端開發”。
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
