iPhone Web 開發應用是本文要介紹的內容，上面也講到了iPhone被設計為不允許安裝任何第三方應用程序（破解不在討論范圍之內），一切第三方應用程序必須以Web的形式來跑，那么，在這也不多說，我們先來看內容。

iPhone Web 應用程序 布局入門

用過iPhone的朋友應該知道，iPhone上面的一些應用程序是能夠隨機器轉動自動適應的，也就是說豎著拿的時候就豎著顯示，橫著拿的話就橫著顯示，iPhone中至關重要的Safari瀏覽器當然也支持這一點了，因此我們考慮設計iPhone friendly的應用程序時，首先要考慮兼容這種情況，不能把頁面定死在一個寬度上。

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

好吧，在我們正是進入布局的討論之前，先來賞析一下已有的iPhone應用：

Facebook iPhone Edition

Facebook的iPhone版。如果你已經習慣了在iPhone上使用過Facebook，第一次在PC上瀏覽這個頁面會被它的“肥大”嚇壞的。從這個頁面我們能夠得知，讓頁面自動適應iPhone屏幕的方法就是盡量使用百分比來定義寬度，特別是全頁寬度一律用100%，如果是導航欄里面4個項目并排的就每個25%。

AppMarks

AppMarks可以說是一個應用程序的書簽，當然也有人把它作為Safari的首頁，那就相當于桌面了，因為你收藏的應用程序就在這個頁面直接顯示，以大圖標的方式。AppMarks以前是可以直接在PC上瀏覽的，現在已經自動將非iPhone的請求重定向到介紹頁了，不過這里有一個AppMarks Demo能在PC上看看。我們能夠看得到圖片是4個一行地排列的，共12個，然而橫屏會怎樣了？當然是變成6個一行，仍然能夠在一屏內顯示完，并且不會有不滿行的圖標。其實這是一個很tricky的做法，12是4和6的公倍數，因此雖然豎屏和橫屏的顯示方式不一樣，但你不會覺得有什么缺陷。

Newsgator Mobile iPhone Edition

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

GMail

這不是普通的GMail嗎？怎樣才能看到iPhone版？這就需要通過修改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了。仍然和上面的網站一樣，可點擊區域是一大個寬度為100%的塊區。

實際上，設計iPhone friendly的界面，在CSS的層面上來說一點也不難，甚至可以說是非常簡單，因為基本上就是寬度為100%的塊區，少數時候要用到按百分比劃分的塊區，但實際上我們也應該避免這種情況。為什么呢？別忘記了，iPhone的用戶是沒有鼠標的，他們必須通過手指來操作頁面上的一切，因此可點擊區域必須盡量大。

既然他們看不到鼠標指針，你也就不用考慮可點擊區域必須是鏈接或者cursor: pointer，因為用戶無法通過鼠標指針的改變來判斷一個區域是否能點擊。然而這同時也就引入了另一個問題，如何讓用戶了解一個區域能否點擊呢？這時候你必須給出明確的視覺暗示，例如看起來是鏈接的文本，藍色的文本有無下劃線通常都挺誘惑人去點，這方面Facebook是一個例子。另一種做法是讓界面看起來是菜單式的，好像AppsMarker和Newsgator那樣，菜單右側的符號讓人挺熟悉不是嗎？只要我點擊這個菜單項，就會展開下一級菜單。最后一種做法就是基于用戶已經熟悉的獨創暗示來提示用戶，習慣使用GMail的用戶一看到郵件標題那個大大的藍色區域，就知道點擊是打開郵件，這是不需要任何指引的，最壞的情況下，用戶不知道點擊什么還是會點擊郵件標題，之后他也就會用了。

iPhone Friendly 的 Web 應用程序  Viewport

在了解到iPhone的一些常見布局法后，我們就可以開始著手編寫一個真正能在iPhone上跑的頁面了。小聲說一句，之前我說要布局討論完了，要進入交互邏輯開發，后來細心一想發現不行，有些東西不講的話將會對布局帶來問題，繞過去的話并不怎么優雅，因此繼續講布局。

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

然而iPhone的Safari不是這樣理解viewport的，它基于viewport呈現頁面，然后用戶縮放頁面后viewport保持不變，僅僅是頁面內容按比例縮放了。舉個例子，在不設置viewport的情況下，默認viewport為寬度980（單位是像素），這時候頁面的呈現出來的布局和在桌面短viewport寬度為980時呈現的結果一致，然而因為iPhone屏幕寬度為320，因此按比例縮小了。因此，一張寬度為320的圖片，在默認viewport下會這樣顯示：

可以看到，圖片按比例縮小了，這對于傳統Web頁面直接在iPhone上面顯示來說是很好的事情，因為如果傳統Web頁面在980寬度的桌面瀏覽器viewport中顯示正常的話，iPhone上顯示也絕對正常。然而這對于Web應用程序來說則不是好事，因為我們需要按照980寬度來設計將來會以320寬度顯示的頁面，一個應該顯示為320*80的元素，必須設計為980*245，這多麻煩！
因此我們需要改變viewport，讓它變成這樣：

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

width - viewport的寬度

height - viewport的高度

initial-scale - 初始的縮放比例

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

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

user-scalable - 用戶是否可以手動縮放

這6個屬性，我們可以設置其中的一個或者多個，iPhone會根據你設置的屬性自動推算其他屬性值，而非直接采用默認值。這點很重要，在完全不設置的時候有默認viewport，在你設置一個屬性后其它值是自動推算出來的，不再是默認的。

如果你把initial-scale=1，那么width和height在豎屏時自動為320*356（不是320*480因為地址欄等都占據空間），橫屏時自動為480*208。

類似地，如果你僅僅設置了width，就會自動推算出initial-scale以及height。例如你設置了width=320，豎屏時initial-scale就是1，橫屏時則變成1.5了。

那么到底這些設置如何讓Safari知道？其實很簡單，就一個meta，形如：

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

在設置了initial-scale=1之后，我們終于可以以1:1的比例進行頁面設計了。下一步我們就可以正式進入頁面布局的細節設計了。如果你想繼續關注iPhone，請繼續閱讀下一篇文章。

小結：關于iPhone Web 開發應用 （上篇）的內容介紹完了，希望本文對你有所幫助，如果你想繼續關注iPhone，請繼續閱讀下一篇文章：iPhone Web 開發應用 （下篇）。