iPhone和iPad Web開發上手指南
根據移動廣告公司 AdMob（現已被 Google 收購）的數據，iPhone 操作系統占全球智能手機市場份額的 50%，位居第二位的是 Android 操作系統，占 24%。蘋果 iPad 發售當年的銷售量預計在一百萬到四百萬臺之間（據 2011 年蘋果公布的數字，2010全年 iPad 的銷售量為 1500 萬臺）。不管你愿不愿意，iPhone OS 尤其是 Safari 已經成為 Web 開發人員必須認真考慮的一股勢力。如果你還沒有的話，那么現在是時候讓自己涉足并熟悉 iOS 網站及 Web 應用的各類優化工具。
感謝上天，iPhone 操作系統上的 Safari 瀏覽器幸好是一款優秀的瀏覽器。跟桌面版的 Safari 4 一樣，它對 CSS3 及 HTML5 有良好的支持。另外它也提供若干一流的界面元素供即用，不過這些界面元素在 iPhone 和 iPad 之間有時還存在差別。另外，由于 iPhone 操作系統面世已經很長一段時間了，網絡上有很多資源可供利用。
我了解的大多數對 iPhone 操作系統平臺的討論都是圍繞原生應用程序開展的。但是我們仍然可以利用 HTML，JavaScript 和 CSS 打造類似原生應用程序的強大應用。本文主要關注網站建造和優化的三大階段：設計，編程及測試。
在開始之前，我們先分析下選用 Web 應用而非原生應用的一些優缺點。
Web 應用相對原生應用的優點：
- 沒有蘋果審核流程的繁文縟節，考慮到目前服務條款爭議仍在發酵中，這點尤其重要。
- 在相同的代碼基礎上，開發人員針對 Android 和黑莓這類平臺對 Web 應用的優化工作要容易的多。
- 你不用學 Objective-C。
- 如果你向用戶收費，你不用與蘋果分享利潤。
- 你對支付方式，推廣及內容分發擁有百分之百的控制權，這可能也是缺點，具體取決你如何看待。 </ul>
- 不會在蘋果應用商店中上架。
- 在設備上安裝 Web 應用實際上有點棘手。
- 無法使用 iPhone 操作系統原生的一些特性，比如推送通知和 GUI 控件。 </ul>
- 蘋果官網上的 Web 應用列表
- Mobile Awesomeness 設計展示
- CSS iPhone 設計展示
- Well Placed Pixels
- 蘋果應用商店 （盡管這里面都是原生應用，但你仍可在這里尋找一些視覺設計上的靈感。） </ul>
- Notepod： iPad 及 iPhone 素描本
- 應用程序素描本
- PixelPads
- UI Stencils 上賣的 iPhone 便簽
- 可打印 iPhone 線框圖模板 （免費） </ul>
- iPhone GUI PSD 3.0 和 iPad GUI PSD （Photoshop）
- Designer’s Toolbox 網站提供的分圖層 iPhone GUI 元素 （Photoshop）
- Smashing Magazine 網站提供的 PSD 矢量圖形包 （Photoshop）
- iPad 及 iPhone 設計模板; 更多設計模版見 Graffletopia （OmniGraffle）
- iPhone 及 iPad GUI 開發工具包，設計模板以及圖標 </ul>
- </ol>
- Google Code 上的 jQtouch 維基
- 《用 HTML, CSS 及 JavaScript 制作 iPhone 應用》第四章：動畫效果
- 《jQTouch 入門》PDF 幻燈片，Philipp Bosch </ul>
- Mobify (Smashing Magazine’s移動站點使用的就是這個)
- Wapple
- Mofuse
- Mobi10 </ul>
Web 應用相對原生應用的缺點：
設計
該平臺上的 Web 應用設計類似原生應用設計，因此你需要利用一些真正優秀的工具。你無論是使用紙筆還是桌面軟件畫線框圖，本文內容都有所涉及。
靈感
知道蘋果官網上有“Web 應用”專題一欄的人還真不多，這里專門用來展示針對 iPhone 操作系統優化了的網站。
蘋果官網上的特色 Web 用應用
下面是其他一些展示優秀移動網頁設計的地方。
紙筆
紙上原型設計（Paper Prototyping）一直以來都是我畫網站線框圖的首選工具。下圖中這個工具我最喜歡的一個地方就是它提供了 iPhone 和 iPad 尺寸的直觀感受。要想成功的為 iPhone 操作系統優化 Web 應用，你需要做各項精簡。我建議你使用下列工具做線框圖，保持設計的簡約。
Notepod 很適合將 iPhone 及 iPad 應用的模糊創意畫成草圖
數字工具
一旦我們理清了設計中各要素的精確布局，我們就可以切換到電腦桌面，敲定細節。我個人很喜歡使用 OmniGraffle 畫線框圖，但有時直接用 PhotoShop 中也是可以的。不管怎樣，這些工具在做設計時都給了巨大的幫助。
Teehan + Lax 提供的 iPad 圖形用戶界面 PSD 文件
意猶未盡？這篇文章另外羅列了一些不錯的設計工具。
編程
為 iPhone 操作系統上的 Safari 構建代碼時，開發人員了解瀏覽器的工作原理很重要。另外，iPhone 和 iPad 瀏覽器資之間有細微的差異，比如表單中的選項框工作方式。不過最為重要的是，Safari 對 CSS3 和 HTML5 有良好的支持，所以你可以使用一些只能在現代瀏覽器中運行的代碼，而不用擔心跨瀏覽器方面的兼容性。
學習資料
蘋果 iPhone 操作系統上的 Safari 瀏覽器為開發者提供了非常不錯的技術文檔，在我看來，蘋果真正有所有所欠缺的地方是未對瀏覽器檢測（browser detection）及屏幕旋轉（window orientation）提供相關技術文檔支持。若要了解為 safari 瀏覽器編寫代碼的相關知識，讀者可閱讀下面羅列的每篇內容。
該規范是對 iPhone 操作系統上 Safari 工作方式方面很全面的一個概述總結。雖然該規范沒有提供具體的代碼示例，但是由于提供了一些不錯的設計建議，很值得仔細閱讀一遍。
該設計文檔在 iPhone 元素和 iPad 元素區別上做了非常不錯的說明。由于該規范就 iPad 人機界面設計提供了非常不錯的建議，也值得仔細閱讀。
該文檔主要涉及視口（viewport），主屏圖標（webclip icons），Safari 私有 meta 標簽，事件處理（event handling）以及其他一些內容。該文檔也提供代碼實例。在開始學習 Web 開發之前，我建議讀者先從頭到尾一字不拉的讀上一遍。
這篇內容就如何在 iPad 上測試你的網站提供了若干小技巧，但是文中對瀏覽器檢測方面的內容不如我想象的詳細。
瀏覽器檢測
戴維·沃爾什（David Walsh）在他博客上就 iPad 及 iPhone 上的瀏覽器檢測方法提供了非常不錯的示例。其中提供了 PHP 和 JavaScript 兩種檢測方式。
Nettuts 上的 iPhone 開發教程就如何根據 iPhone 屏幕方向提供不同的 CSS 樣式表給出了非常不錯的示例。
檢測 iPad 屏幕方向
檢測 iPad 屏幕方向非常簡單。下面是所用代碼（無需 JavaScript 腳本）：
Html 代碼
JQTOUCH MOBILE 框架
盡管 iPhone 上已有幾款移動設備開發框架，但 jQtouch 卻一枝獨秀。jQtouch 提供了一切所需工具，可讓你的移動網站應用用起來像是原生應用。讀者可訪問項目主頁，用 iPhone 體驗下上面的 Demo 網站。
我在使用 jQtouch 開發自己首個網站時，只有一個不滿的地方：jQtouch 卻缺乏相關的文檔和教程。我不得不研究 Demo 站點的代碼才弄清楚 jQtouch 的用法。下面這幾篇 jQtouch 方面的內容對我提供了非常大的幫助。
測試
iPhone 上的網站或 Web 應用開發過程中一個關鍵且有些棘手的地方就是測試。它比一般的用瀏覽器來測試網站要復雜一點，不過你熟練使用幾款工具的話可讓測試過程簡單不少。
LIVEVIEW
在應用的設計及初始編程階段，Liveview 是一款測試神器，它可以將桌面圖像傳輸到你的 iPhone 上，方便實際的效果。在調整文本字體大小和視覺效果時非常有用，因為有時光憑 PhotoShop 是很難反映實際效果的。
使用 iPhone 模擬器
依我之見，目前市面上還沒有一款優秀的 iPhone 或者 iPad 模擬器。目前的模擬器都是浪費時間的。最好是下載最新版本的開發工具包（SDK），并使用蘋果官方的 iPhone 操作系統模擬器，這款模擬器理所當然的也支持 iPad。
設置 SDK 以及本地測試環境需要耗費不少時間，相比依賴不靠譜的非官方模擬器，這點時間還是值得的。本人寫過一篇如何設置本地測試環境的教程，值得一度。本地測試的一個好處就是速度很快，不需要連接互聯網。我極力推薦讀者依此方式開發，直至應用開發完畢，可以上線。
PhoneGap: 兩全其美的解決之道?
對 Web 開發人員而言，PhoneGap 堪稱規則顛覆者（game-changer）。如果你即想用 HTML，CSS 及 JavaScript 制作應用，但是也想程序能在本地運行，并在蘋果應用商店中上架，那么 PhoneGap 則是解決之道。這是一款開源開發工具，它不僅可以將你的代碼編譯成 iPhone 操作系統上原生應用，而且它可以將代碼編譯成能夠在 Android，Palm，Symbian，Windows Mobile 以及黑莓設備上運行的程序。
PhoneGap 也避開了最近蘋果極具爭議的服務條款中的3.3.1條款。換句話而言，使用 PhoneGap 編譯的應用層序仍可得到批準，可以在應用商店上架。讀者可以了解下使用 PhoneGap 制作的應用程序清單，了解相關情況。
感覺有些眼花繚亂了?
如果是的話，一些優秀的服務可以讓你不用從頭開始針對多個平臺優化網站。這些服務在靈活性上有所差異，但是所有這些服務都利用了類似所見即所得（WYSIWYG）的編輯器，幫助用戶創建網站。根據你的 Web 應用及客戶的不同，下面這些服務中可能有適合你的。
如果你不想從頭開始制作制作 Web 應用，那 Mobify 是一個不錯的選擇
結論
現今是 Web 開發人員的黃金年代，此前從沒有一個桌面平臺像 iPhone 操作系統這樣為我們帶來了表現創造能力和釋放創業精神的無限可能，于此同時并遵循現代 Web 標準。iPhone 操作系統目前正在主宰移動領域，在這個平臺上創造優秀 Web 體驗的所有一切工具已經存在，能否充分利用完全取決于讀者你！