iPhone Web 開發應用 （上篇）

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 開發應用 下篇）。