根據(jù)AdMob ,的調(diào)查顯示，iPhone的操作系統(tǒng)是占全球智能手機(jī)操作系統(tǒng)份額最高的手機(jī)操作系統(tǒng)，高達(dá)40%，而排名第二的安卓系統(tǒng)所占比例為26%。在蘋(píng)果發(fā)布Ipad的第一年，其世界各地的銷售量均突破100萬(wàn)臺(tái)，最高達(dá)到400萬(wàn)臺(tái)。無(wú)論你是喜歡還是反感，IOS和Safari現(xiàn)在已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)的一個(gè)不容忽視的角色。如果你對(duì)IOS還不熟悉，那我勸你最好先靜下心來(lái)，好好學(xué)習(xí)和熟悉IOS網(wǎng)絡(luò)應(yīng)用開(kāi)發(fā)與IOS環(huán)境下移動(dòng)網(wǎng)站優(yōu)化所需要的要點(diǎn)和工具。幸好iPhone內(nèi)置的Safari瀏覽器是一個(gè)優(yōu)秀的瀏覽 器。像用于電腦的Safri、樣，iPhone內(nèi)置的Safari也支持CS3和HTML5。Safari 瀏覽器也有一些非常獨(dú)特的光滑界面元素設(shè)計(jì)，這些設(shè)計(jì)在iPhone和iPad上有著不同的顯示效果。因?yàn)閕os已經(jīng)趨向成熟并擁有大量的用戶，所以該系統(tǒng)可利用的資源非常豐富。我們知道大家討論的焦點(diǎn)就是ios平臺(tái)上的原生應(yīng)用程序。但是你仍然可以涌過(guò)使用HTML、JavaScript 和CSS來(lái)開(kāi)發(fā)類似于系統(tǒng)原生程序的強(qiáng)大應(yīng)用。本文將重點(diǎn)講解創(chuàng)建和優(yōu)化網(wǎng)站的三個(gè)重要階段:設(shè)計(jì)理念、編寫(xiě)代碼、功能測(cè)試。在開(kāi)始討論上述三個(gè)重要步驟之前，讓我們先來(lái)看一看網(wǎng)絡(luò)應(yīng)用程序與原生應(yīng)用程序相比較所存在的一些優(yōu)點(diǎn)和不足。
開(kāi)發(fā)網(wǎng)絡(luò)應(yīng)用程序的優(yōu)點(diǎn):
(1)不用經(jīng)歷蘋(píng)果公司繁雜的審批程序，特別是現(xiàn)在那些復(fù)雜冗長(zhǎng)的服務(wù)糾紛條款。
(2)用相同的程序代碼優(yōu)化運(yùn)用于像安卓系統(tǒng)和黑莓系統(tǒng)等其他主流操作平臺(tái)的網(wǎng)絡(luò)應(yīng)用程序時(shí)更方便也更容易。
(3)不用另外學(xué)習(xí)0bjective-C。
(4)如果你開(kāi)發(fā)的是收費(fèi)應(yīng)用程序，你不用和蘋(píng)果公司共享你的收入。
(5)你對(duì)用戶支付手段、費(fèi)用分配和產(chǎn)品促銷有著完全的控制權(quán)，同時(shí)這也可能有負(fù)面影響，關(guān)鍵在于你如何對(duì)待。
開(kāi)發(fā)網(wǎng)絡(luò)應(yīng)用程序的缺點(diǎn):

1. 你的應(yīng)用不會(huì)出現(xiàn)在App Store中。.
2. 在設(shè)備上安裝該應(yīng)用程序可能會(huì)有點(diǎn)麻煩。
3. 不能擁有一些原生ios應(yīng)用程序的功能，例如推送通知和GUI控件。

• 設(shè)計(jì)理念

其實(shí)設(shè)計(jì)一個(gè)ios平臺(tái)上的網(wǎng)絡(luò)應(yīng)用程序和設(shè)計(jì)原生ios應(yīng)用的理念大同小異，首先你要具備必要的操作工具。無(wú)論你是準(zhǔn)備用筆和紙來(lái)勾勒網(wǎng)站的框架，或是用電腦軟件來(lái)完成，你都要做好充足的準(zhǔn)備。

1. 迸發(fā)靈感

沒(méi)有多少人知道在蘋(píng)果網(wǎng)站有“網(wǎng)絡(luò)應(yīng)用程序”這個(gè)鏈接，這-部分專門(mén)展示一些網(wǎng)站優(yōu)化的案例。

2. 圖紙

在設(shè)計(jì)網(wǎng)站和構(gòu)思線框的時(shí)候，圖紙一直 是表達(dá)思想和理念的首選工具。因?yàn)樗鼈兡転樵O(shè)計(jì)構(gòu)想的事物提供既定的空間和透視圖的效果。你必須全神費(fèi)注才能順利完成用于iOS平臺(tái)的網(wǎng)絡(luò)應(yīng)用程序。建議使用下述的其中- -種工具進(jìn)行設(shè)計(jì)，然后建議用美觀的線框保留最簡(jiǎn)明的設(shè)計(jì)。

3. 數(shù)碼軟件

一旦你知道這些軟件是 如何使用的,我們就可以直接把設(shè)計(jì)搬到電腦桌面上, 利用這些軟件來(lái)完成。可以用OmiGrafle來(lái)繪制線框，不過(guò)有時(shí)候直接用Photoshop也是可行的。總之，這些數(shù)碼軟件對(duì)你繪制線框還是很有幫助的。

• 編寫(xiě)代碼

當(dāng)你開(kāi)始為ios系統(tǒng)上的Safari瀏覽器編寫(xiě)代碼的時(shí)候，理解瀏覽器的運(yùn)行原理是非常重要的。同樣，iPhone和iPad的瀏覽器在使用上還是存在著一些細(xì)微的差別，例如表單框的選取就不一樣。還有一點(diǎn)非常重要，因?yàn)镾a- fari支持CSS3和HTML5，所以你可以放心地使用現(xiàn)在的代碼而不用擔(dān)心跨瀏覽器兼容問(wèn)題。

• 學(xué)習(xí)資源

IOS系統(tǒng)確實(shí)對(duì)于Safari的優(yōu)化下了很大的功夫，并且做得很好。我個(gè)人認(rèn)為唯一不足的地方就是沒(méi)有做好窗口定向，還有就是缺乏輔助瀏覽器檢測(cè)功能。讀了下面的文章你就會(huì)對(duì)瀏覽器代碼編寫(xiě)有-一個(gè)全面細(xì)致的了解。iPhone網(wǎng)絡(luò)應(yīng)用程序的人機(jī)交互手冊(cè)https://developer.apple .com/library/safari/#documentation/InternetWeb/Con- ceptual/iPhoneWebAppHlG/Introduction/Introduction.html該文章全面地總結(jié)了Safari 瀏覽器是如何在ios系統(tǒng)上運(yùn)行的。雖然文章里沒(méi)有具體的程序編碼案例，但是給讀者提供了許多很好的意見(jiàn)，所以還是值得去深入學(xué)習(xí)了解的。

• iPhone網(wǎng)絡(luò)應(yīng)用程序的人機(jī)交互手冊(cè)

https://developer.apple .com/library/safari/#documentation/InternetWeb/Con-ceptual/iPhoneWebAppHlG/Introduction/Introduction.html
這篇文章則詳細(xì)描寫(xiě)了iPhone和iPad的細(xì)節(jié)差別。因?yàn)檫@篇文章里收錄了一些有對(duì) iPad設(shè)計(jì)有重大參考價(jià)值的建議，所以也建議你花時(shí)間來(lái)讀-讀。

• Safari網(wǎng)頁(yè)內(nèi)容指南

https://developer. apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html這篇文章詳細(xì)介紹了Safari 包含視窗、網(wǎng)絡(luò)收藏圖標(biāo)、獨(dú)特的元標(biāo)簽和事件處理在內(nèi)的很多內(nèi)容。同時(shí)文章中還提供了代碼示例。建議讀者能把這本書(shū)從頭到尾一字不漏地完整看-遍。

• 定義瀏覽器

大衛(wèi)●沃爾什在他的博客上列舉了很多正確定義iPhone和iPad瀏覽器的例子。這其中也包含了使用JavaScript和PHP。

• 檢測(cè)Iphone窗口定義

ht://.tousronsto/otoolss and tps/ern-how-to-develo-forthe-iPhone/Nettuts的iPhone開(kāi)發(fā)教程為如何根據(jù)iPhone的定義來(lái)改變樣式表提供了、個(gè)非常好的例子。

• 檢測(cè)Ipad窗口定義

相比之下，檢測(cè)iPad的窗口定義要容易得多。下面是編譯代碼(不需要用JavaScript ): <link rel='stylesheet”media='all and (orientation :portrait)” href=”portrait.css" ><link rel='”stylesheet" media=" all and (orientat ion: landscape)” href=”landscape .css”>

• JQTouch移動(dòng)網(wǎng)絡(luò)框架

雖然iPhone有-些已經(jīng)發(fā)展成熟的移動(dòng)網(wǎng)絡(luò)框架，但是jQTouch無(wú)疑是最好的。jQTouch所提供的功能能讓你的移動(dòng)網(wǎng)絡(luò)應(yīng)用做得像系統(tǒng)原生應(yīng)用一模一樣。

• 功能測(cè)試

開(kāi)發(fā)一個(gè)適用于ios系統(tǒng)的網(wǎng)絡(luò)應(yīng)用軟件或者網(wǎng)站最關(guān)鍵也最難搞定的部分就是功能測(cè)試。在手機(jī)上進(jìn)行瀏覽器測(cè)試比在電腦上進(jìn)行瀏覽器要更有難度, 但是只要你熟悉測(cè)試工具和測(cè)試流程，測(cè)試-般還是可以順利進(jìn)行的。

1. 實(shí)時(shí)顯示

如果你的應(yīng)用程序還正在設(shè)計(jì)當(dāng)中，或者正處于編碼的初始階段，那么實(shí)時(shí)顯示是一個(gè)非常有用的工具。它可以通過(guò)電腦連接你的手機(jī)并獲取手機(jī)里的顯示圖像，讓你對(duì)手機(jī)內(nèi)的程序進(jìn)展一目了然。由于有時(shí)候通過(guò)Photoshop來(lái)顯示手機(jī)里的圖像是很麻煩的，所以用實(shí)時(shí)顯示能有效協(xié)助你調(diào)整頁(yè)面文字的大小和一些顯示細(xì)節(jié)。

2. 使用iPhone模擬器

那些能用的iPhone和iPad模擬器沒(méi)有一個(gè)是好的，用這些模擬器簡(jiǎn)直就是在浪費(fèi)時(shí)間。與其如此，還不如下載最新版本的SDK,或者在蘋(píng)果官方網(wǎng)站上下載同時(shí)支持iPhone和iPad的ios模擬器。通常設(shè)定SDK和本地測(cè)試環(huán)境要花上-段時(shí)間，不過(guò)和依靠并不準(zhǔn)備的模擬器來(lái)測(cè)試，多花上幾分鐘等待環(huán)境建立好還是很值得的。本地測(cè)試有一個(gè)最大的好處，那就是不僅不知道鏈接網(wǎng)絡(luò)完成工作而且測(cè)試的速度也很快。如果你準(zhǔn)備進(jìn)行功能測(cè)試的話，更推薦你使用這種方法。