iPhone Web 開發(fā)應(yīng)用是本文要介紹的內(nèi)容，上面也講到了iPhone被設(shè)計(jì)為不允許安裝任何第三方應(yīng)用程序（破解不在討論范圍之內(nèi)），一切第三方應(yīng)用程序必須以Web的形式來(lái)跑，那么，在這也不多說(shuō)，我們先來(lái)看內(nèi)容。

iPhone Web 應(yīng)用程序 布局入門

用過(guò)iPhone的朋友應(yīng)該知道，iPhone上面的一些應(yīng)用程序是能夠隨機(jī)器轉(zhuǎn)動(dòng)自動(dòng)適應(yīng)的，也就是說(shuō)豎著拿的時(shí)候就豎著顯示，橫著拿的話就橫著顯示，iPhone中至關(guān)重要的Safari瀏覽器當(dāng)然也支持這一點(diǎn)了，因此我們考慮設(shè)計(jì)iPhone friendly的應(yīng)用程序時(shí)，首先要考慮兼容這種情況，不能把頁(yè)面定死在一個(gè)寬度上。

且慢，我們不是說(shuō)設(shè)計(jì)自己的應(yīng)用程序嗎？這和內(nèi)置的Safari有何關(guān)系？iPhone被設(shè)計(jì)為不允許安裝任何第三方應(yīng)用程序（破解不在討論范圍之內(nèi)），一切第三方應(yīng)用程序必須以Web的形式來(lái)跑，小到一個(gè)國(guó)際象棋的游戲也如此，因此我們現(xiàn)在說(shuō)的應(yīng)用程序就是指Web，但是與傳統(tǒng)意義上以提供信息為核心的Web又不同，我們所說(shuō)的是以提供交互操作為主的應(yīng)用。

好吧，在我們正是進(jìn)入布局的討論之前，先來(lái)賞析一下已有的iPhone應(yīng)用：

Facebook iPhone Edition

Facebook的iPhone版。如果你已經(jīng)習(xí)慣了在iPhone上使用過(guò)Facebook，第一次在PC上瀏覽這個(gè)頁(yè)面會(huì)被它的“肥大”嚇壞的。從這個(gè)頁(yè)面我們能夠得知，讓頁(yè)面自動(dòng)適應(yīng)iPhone屏幕的方法就是盡量使用百分比來(lái)定義寬度，特別是全頁(yè)寬度一律用100%，如果是導(dǎo)航欄里面4個(gè)項(xiàng)目并排的就每個(gè)25%。

AppMarks

AppMarks可以說(shuō)是一個(gè)應(yīng)用程序的書簽，當(dāng)然也有人把它作為Safari的首頁(yè)，那就相當(dāng)于桌面了，因?yàn)槟闶詹氐膽?yīng)用程序就在這個(gè)頁(yè)面直接顯示，以大圖標(biāo)的方式。AppMarks以前是可以直接在PC上瀏覽的，現(xiàn)在已經(jīng)自動(dòng)將非iPhone的請(qǐng)求重定向到介紹頁(yè)了，不過(guò)這里有一個(gè)AppMarks Demo能在PC上看看。我們能夠看得到圖片是4個(gè)一行地排列的，共12個(gè)，然而橫屏?xí)鯓恿耍慨?dāng)然是變成6個(gè)一行，仍然能夠在一屏內(nèi)顯示完，并且不會(huì)有不滿行的圖標(biāo)。其實(shí)這是一個(gè)很tricky的做法，12是4和6的公倍數(shù)，因此雖然豎屏和橫屏的顯示方式不一樣，但你不會(huì)覺(jué)得有什么缺陷。

Newsgator Mobile iPhone Edition

終于有一個(gè)ASP.NET寫的iPhone應(yīng)用了，其實(shí)和上面的Facebook看起來(lái)差不多，同樣采用了寬度為100%的做法，同時(shí)頁(yè)面上的元素要么向左對(duì)齊要么向右對(duì)齊。這聽起來(lái)很廢話，其實(shí)意思是，中間盡管留空，不要想把整個(gè)寬度為100%的塊區(qū)都利用起來(lái)，說(shuō)明性文字可以放左邊，操作及視覺(jué)反饋放右邊，這樣無(wú)論屏幕怎么旋轉(zhuǎn)都好看。如果中間塞滿了內(nèi)容，只會(huì)讓Safari進(jìn)行比例縮放操作，把頁(yè)面整個(gè)縮小，這其實(shí)是不利于操作的。

GMail

這不是普通的GMail嗎？怎樣才能看到iPhone版？這就需要通過(guò)修改user-agent屬性欺騙它了。iPhone上的Safari所用的user-agent如下所示：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

使用Firefox的User Agent Switcher修改一下user-agent就行了，然后你就能看到iPhone上看到的GMail了。仍然和上面的網(wǎng)站一樣，可點(diǎn)擊區(qū)域是一大個(gè)寬度為100%的塊區(qū)。

實(shí)際上，設(shè)計(jì)iPhone friendly的界面，在CSS的層面上來(lái)說(shuō)一點(diǎn)也不難，甚至可以說(shuō)是非常簡(jiǎn)單，因?yàn)榛旧暇褪菍挾葹?00%的塊區(qū)，少數(shù)時(shí)候要用到按百分比劃分的塊區(qū)，但實(shí)際上我們也應(yīng)該避免這種情況。為什么呢？別忘記了，iPhone的用戶是沒(méi)有鼠標(biāo)的，他們必須通過(guò)手指來(lái)操作頁(yè)面上的一切，因此可點(diǎn)擊區(qū)域必須盡量大。

既然他們看不到鼠標(biāo)指針，你也就不用考慮可點(diǎn)擊區(qū)域必須是鏈接或者cursor: pointer，因?yàn)橛脩魺o(wú)法通過(guò)鼠標(biāo)指針的改變來(lái)判斷一個(gè)區(qū)域是否能點(diǎn)擊。然而這同時(shí)也就引入了另一個(gè)問(wèn)題，如何讓用戶了解一個(gè)區(qū)域能否點(diǎn)擊呢？這時(shí)候你必須給出明確的視覺(jué)暗示，例如看起來(lái)是鏈接的文本，藍(lán)色的文本有無(wú)下劃線通常都挺誘惑人去點(diǎn)，這方面Facebook是一個(gè)例子。另一種做法是讓界面看起來(lái)是菜單式的，好像AppsMarker和Newsgator那樣，菜單右側(cè)的符號(hào)讓人挺熟悉不是嗎？只要我點(diǎn)擊這個(gè)菜單項(xiàng)，就會(huì)展開下一級(jí)菜單。最后一種做法就是基于用戶已經(jīng)熟悉的獨(dú)創(chuàng)暗示來(lái)提示用戶，習(xí)慣使用GMail的用戶一看到郵件標(biāo)題那個(gè)大大的藍(lán)色區(qū)域，就知道點(diǎn)擊是打開郵件，這是不需要任何指引的，最壞的情況下，用戶不知道點(diǎn)擊什么還是會(huì)點(diǎn)擊郵件標(biāo)題，之后他也就會(huì)用了。

iPhone Friendly 的 Web 應(yīng)用程序  Viewport

在了解到iPhone的一些常見(jiàn)布局法后，我們就可以開始著手編寫一個(gè)真正能在iPhone上跑的頁(yè)面了。小聲說(shuō)一句，之前我說(shuō)要布局討論完了，要進(jìn)入交互邏輯開發(fā)，后來(lái)細(xì)心一想發(fā)現(xiàn)不行，有些東西不講的話將會(huì)對(duì)布局帶來(lái)問(wèn)題，繞過(guò)去的話并不怎么優(yōu)雅，因此繼續(xù)講布局。

首先要說(shuō)的就是viewport，也就是可視區(qū)域。對(duì)于桌面瀏覽器，我們都很清楚viewport是什么，就是出去了所有工具欄、狀態(tài)欄、滾動(dòng)條等等之后用于看網(wǎng)頁(yè)的區(qū)域，這是真正有效的區(qū)域。（無(wú)論你屏幕多大，如果你裝足夠多的toolbar，你的viewport最終也會(huì)消失掉。）在桌面瀏覽器中，viewport的大小是與瀏覽器窗口大小直接相關(guān)的，窗口大了viewport自然就大，同時(shí)隨著viewport的改變，頁(yè)面布局可能也跟著變。例如width: 100%的頁(yè)面寬度就總是和viewport寬度一致。

然而iPhone的Safari不是這樣理解viewport的，它基于viewport呈現(xiàn)頁(yè)面，然后用戶縮放頁(yè)面后viewport保持不變，僅僅是頁(yè)面內(nèi)容按比例縮放了。舉個(gè)例子，在不設(shè)置viewport的情況下，默認(rèn)viewport為寬度980（單位是像素），這時(shí)候頁(yè)面的呈現(xiàn)出來(lái)的布局和在桌面短viewport寬度為980時(shí)呈現(xiàn)的結(jié)果一致，然而因?yàn)閕Phone屏幕寬度為320，因此按比例縮小了。因此，一張寬度為320的圖片，在默認(rèn)viewport下會(huì)這樣顯示：

可以看到，圖片按比例縮小了，這對(duì)于傳統(tǒng)Web頁(yè)面直接在iPhone上面顯示來(lái)說(shuō)是很好的事情，因?yàn)槿绻麄鹘y(tǒng)Web頁(yè)面在980寬度的桌面瀏覽器viewport中顯示正常的話，iPhone上顯示也絕對(duì)正常。然而這對(duì)于Web應(yīng)用程序來(lái)說(shuō)則不是好事，因?yàn)槲覀冃枰凑?80寬度來(lái)設(shè)計(jì)將來(lái)會(huì)以320寬度顯示的頁(yè)面，一個(gè)應(yīng)該顯示為320*80的元素，必須設(shè)計(jì)為980*245，這多麻煩！
因此我們需要改變viewport，讓它變成這樣：

實(shí)際上應(yīng)該怎么做呢？我們有幾個(gè)選擇，因此先讓我們看看到底我們能夠設(shè)置哪些屬性吧。我們可以操作的屬性有4個(gè)：

width - viewport的寬度

height - viewport的高度

initial-scale - 初始的縮放比例

minimum-scale - 允許用戶縮放到的最小比例

maximum-scale - 允許用戶縮放到的最大比例

user-scalable - 用戶是否可以手動(dòng)縮放

這6個(gè)屬性，我們可以設(shè)置其中的一個(gè)或者多個(gè)，iPhone會(huì)根據(jù)你設(shè)置的屬性自動(dòng)推算其他屬性值，而非直接采用默認(rèn)值。這點(diǎn)很重要，在完全不設(shè)置的時(shí)候有默認(rèn)viewport，在你設(shè)置一個(gè)屬性后其它值是自動(dòng)推算出來(lái)的，不再是默認(rèn)的。

如果你把initial-scale=1，那么width和height在豎屏?xí)r自動(dòng)為320*356（不是320*480因?yàn)榈刂窓诘榷颊紦?jù)空間），橫屏?xí)r自動(dòng)為480*208。

類似地，如果你僅僅設(shè)置了width，就會(huì)自動(dòng)推算出initial-scale以及height。例如你設(shè)置了width=320，豎屏?xí)rinitial-scale就是1，橫屏?xí)r則變成1.5了。

那么到底這些設(shè)置如何讓Safari知道？其實(shí)很簡(jiǎn)單，就一個(gè)meta，形如：

<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> 

在設(shè)置了initial-scale=1之后，我們終于可以以1:1的比例進(jìn)行頁(yè)面設(shè)計(jì)了。下一步我們就可以正式進(jìn)入頁(yè)面布局的細(xì)節(jié)設(shè)計(jì)了。如果你想繼續(xù)關(guān)注iPhone，請(qǐng)繼續(xù)閱讀下一篇文章。

小結(jié)：關(guān)于iPhone Web 開發(fā)應(yīng)用 （上篇）的內(nèi)容介紹完了，希望本文對(duì)你有所幫助，如果你想繼續(xù)關(guān)注iPhone，請(qǐng)繼續(xù)閱讀下一篇文章：iPhone Web 開發(fā)應(yīng)用 （下篇）。