本節介紹的是iPhone Web 開發應用 （下篇），繼續iPhone Web 開發應用 （上篇）開始介紹，在文章里有詳細介紹iPhone Web Apps交互方案，和CSS，等一些我們常用的一些內容知識，希望對你有興趣。

在接下來的兩篇文章中，我們將探討iPhone上的Safari所支持的XHTML與CSS，之后才進入JavaScript的討論。作為一款現代化的瀏覽器，Safari當然是基于標準的，那就讓我們看看Safari支持哪些標準吧：

HTML 4.01  
XHTML 1.0  
CSS 2.1 以及部分 CSS 3  
JavaScript (ES3)  
DOM (Level 2)  
AJAX (XMLHttpRequest) 

熟悉這些標準并且平常也堅持Web Standards實踐的朋友估計要笑出來了——就這些嗎？我們天天在用啊，還有必要專門寫文章來說明嗎？事實上，Safari之前作為一款無PC版的瀏覽器，一直用戶數量就不高，因此對它的研究也就不多，然而Safari其實有不少自己的擴展，因此還是很值得研究的。既然我們是針對iPhone設置，其實就是針對Safari設計，無需考慮兼容其它瀏覽器，這時候為什么不好好利用這些擴展增強自己的應用程序的可用性呢？

好吧，不說廢話了，進入Safari對XHTML支持的介紹吧！

鏈接

iPhone對一下這樣一些鏈接有特殊支持：

郵件

傳統的mailto:地址iPhone將能自動使用內含的郵件程序處理，直接進入編寫郵件的界面。完整的mailto:格式請參考RFC 2368。

電話

iPhone上的Safari會自動對看起來像是電話號碼的數字串（包括已經加入連字符或括號格式化過的）添加電話鏈接，點擊之后會詢問用戶是否想要撥打該號碼。如果你不希望開啟這個自動識別，可以將它關閉：

<meta name="format-detection" content="telephone=no"  /> 

如果你關閉自動識別后，又希望某些電話號碼能夠鏈接到iPhone的撥號功能，那么可以通過這樣來聲明電話鏈接：

<a href="tel:13800138000">13800138000</a> 

Google Maps

Google Maps的地圖鏈接會自動調用內置的Google Maps客戶端軟件打開，而非在瀏覽器內瀏覽。鏈接可以是一個地點查詢：

<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a> 

也可以是一個路線查詢：

<a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a> 

YouTube

如果鏈接是指向YouTube視頻地址的，將會自動調用內置的YouTube客戶端打開播放。能夠識別的YouTube地址格式為：

http://www.youtube.com/watch?v=<video identifier> 
http://www.youtube.com/v/<video identifier> 

其中<video identifier>替換為視頻的id。

圖片

由于用戶瀏覽時有可能使用Wi-Fi，也有可能使用EDGE(GPRS)，因此你必須優化你的圖片以確保即使是在使用EDGE訪問你的網站的用戶也能流暢的打開頁面。因此你必須優化頁面上的圖片，盡量減少它們占用的傳輸帶寬。另外Safari本身還對圖片有如下的限制：

GIF（包括GIF動畫）、PNG與TIFF解壓后的體積小于2m。意思是，原圖的長度乘以寬度再乘以每一個像素的位數，得出來的大小要小于2m。

JPEG解壓后最大的體積是32m。解壓體積大于2m的JPG會被進行二次抽樣，最終顯示給用戶的是二次抽樣后的結果。這使得Safari能夠顯示數碼相機直接拍攝出來的照片，但顯示時實際上是降低了精度的，以提高程序的執行效率。

為了盡量提高效率，例如你要將100*100的圖片顯示為10*10，就要在服務器端執行壓縮操作，而不要直接用10*10的<img />來引用100*100的原始圖片。

表單

text, password, textarea 

在設計文本框的時候，必須記住用戶點擊后會出現軟鍵盤，這時候可視區域就減少了：

另外在文本框中輸入時，iPhone提供了自動大寫與自動更正兩項功能。自動大寫的意思是，在輸入開始的時候，以及在一個句號并空一個格后，自動會啟用shift，輸入一個字母后該shift自動消失。自動修正的意思是，iPhone會自動根據詞庫，包括自帶的以及從你過往輸入分析而來的，來對你的輸入進行自動更正。我們都知道用手指點擊那么小一個軟鍵盤很容易誤按旁邊的鍵，這時候你可以不用忙于修正，只要iPhone提示的自動修正的詞正是你想要的，你就可以按空格然后輸入下一個詞，iPhone會自動修正前面那個詞。

要關閉這兩項功能，可以通過autocapitalize與autocorrect這兩個選項：

<input type="text" autocapitalize="off" autocorrect="off"  /> 

select

必須留意到的是，iPhone上的<select />以不同的方式顯示，以便于用戶操作：

upload

iPhone不支持任何的文件上傳下載，因此<input type="upload" />總是會顯示出來，并且是……disabled的！

多媒體內容

iPhone上支持顯示的多媒體內容，除了圖片還包括QuickTime音頻視頻以及PDF。

如果需要創建視頻，可以使用QuickTime Pro。如果你正在使用一臺MacBook或者iMac，并且已經將QuickTime升級為QuickTime Pro，可以馬上就試一試！你需要做的就是打開QuickTime Pro，然后開始錄像，（接著請對著鏡頭傻笑3秒，或者做點別的），最后選擇"Export for Web"。其中iPhone格式與iPhone (cellular)格式分別適用于Wi-Fi與EDGE環境，iPhone在播放時會自動根據當前的環境選擇適合的流媒體文件進行下載與播放，另外poster是指影片播放之前在頁面上顯示的那一幀靜態圖片。導出后文件夾里ReadMe.html說明了如何將這些文件添加到XHTML中。

（事實上，導出結果中QuickTime控件引用的那個mov文件不包含任何視頻數據，它只是一個引用，類似我們編程時所說的引用，用于指向真正的視頻文件。不過這個引用指向的是多個視頻文件，客戶端根據當前的狀態自動選擇正確的視頻文件來播放。）

其他瑣事

雖然說是瑣事，但也必須注意到，這樣才能讓你的頁面更好地受到Safari的支持。這包括：

聲明正確的doctype

避免使用frameset

每一個獨立的資源文件，HTML、CSS、JavaScript、以及非流媒體的其他多媒體文件，限制在10m之內

頂級入口的JavaScript執行時間限制為5秒，超時將自動終止。

JavaScript分配內存上限為10m。

同一時間最多在Safari內打開8個子窗口（同時瀏覽的頁面）。

說到編寫CSS，大家的第一反應肯定是——有沒有選擇性CSS。有！我們可以設計一個CSS，使得只有iPhone上的Safari會采用它，其他瀏覽器都會無視它，這樣我們就可能可以復用現有的XHTML頁面代碼，僅僅為它們引入新的CSS就能夠適用于iPhone，無須重新編寫頁面。這個選擇性CSS鏈接語句如下：

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet" />

Safari是支持media選擇的，only screen聲明該CSS僅用于屏幕顯示（不用于打印），同時Safari還支持max-device-width這樣的選項，限定屏幕寬度小于480的設備才采用該樣式表，這就把iPhone與桌面瀏覽器劃分開來了。

另一個做法是在服務器端就判斷當前瀏覽器是否是iPhone上的Safari，從而選擇返回哪個CSS文件，這可以通過user-agent進行判斷，iPhone的如下：

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

判斷了瀏覽器之后，就可以開始針對Safari編寫CSS了。Safari比較爽的一點是對CSS3的支持，設計PC端網頁時總是要兼顧那個“后進”的IE，從而避免使用CSS3，或者需要確保IE在無視CSS3規則后仍然正確顯示，現在不用為此而頭痛啦，只要是Safari支持的就能用，針對一個瀏覽器設計就是比針對一堆瀏覽器設計要爽！

CSS3

接下來我們就列舉一下Safari支持的CSS3屬性吧：

邊框

-webkit-border-image - 讓邊框支持圖片（iPhone上支持存在bug）

-webkit-border-radius - 讓邊框支持遠角

-webkit-box-shadow - 讓盒區域支持陰影（iPhone上不支持）

背景

-webkit-background-origin / -webkit-background-clip - 控制背景的定位與剪裁

-webkit-background-size - 控制背景的大小

background - 多背景，如同單背景一樣定義一個背景圖片，多個圖片定義之間用逗號分隔（未經測試）

色彩

HSL - HSL色彩

HSLA - 帶Alpha通道的HSL色彩

opacity - 透明度

RGBA - 帶Alpha通道的RGB色彩

文本特效

text-shadow - 讓文本支持陰影

text-overflow - 控制文本溢出時的裁剪與視覺反饋

word-wrap - 控制長單詞換行

用戶界面

-webkit-box-sizing - 可以讓盒模型變得基于邊框而非內容

resize - 讓用戶可以更改盒的大小（iPhone上不支持）

outline - 設置盒的外邊框

選擇器

Safari支持大部分的CSS3選擇器，你可以自己使用桌面端或iPhone上的Safari打開CSS Selectors Test進行測試，桌面端與iPhone上的Safari測試結果是一致的。Safari完全通過測試的CSS3選擇器包括：

*, E, .class, #id, E F, E > F, E + F, E[attribute], :link, :visited, :before, ::before, :after, ::after, :first-letter, 
::first-letter, :first-line, ::first-line, E - F, :root, :not(), :target, :enabled, :disabled, :checked 

其它

media - 根據media選擇性加載CSS

multi-column - 內容分欄支持（iPhone上不支持）

還有一些Safari自己做的CSS擴展沒有列舉出來。Safari完整的CSS屬性支持列表請看這里：Supported CSS Properties。

表單

Safari支持對<input />元素比較高自由度的CSS定義，例如這樣的：
 
實現所需的CSS屬性上面已經列舉了，所以不再詳細說明，靈活運用就是了。值得注意的是，某些<input />的默認背景并非純白色的，而是半透明的，這使得這些元素能夠更好地和不同的背景顏色進行顏色混合。為了說明這一點，請先看白色背景下的示例：

然后再看看藍色背景下的：

大部分針對桌面瀏覽器進行符合Web Standards頁面設計的設計師都能輕易掌握這部分內容，然而這只是實現設計的手段，到底如何設計一個界面，在iPhone上才算是擁有高度易用性的，這才是真正的問題。這個問題我們將在以后探討，至少現在你能夠將你自己的設計在iPhone上準確無誤的實現出來了，那么我們下一步就進入JavaScript的討論環節了。

iPhone Friendly 的 Web 應用程序 交互入門

我們已經研究過XHTML和CSS了，現在開始看看最后一部分，也就是JavaScript，以及它所提供的交互能力。

無AJAX交互

第一種我們要看的交互，是完全不使用JavaScript，這其中一個例子就是GMail。GMail的iPhone版其實就是由普通的GMail移動版修改過來的，界面上更貼近桌面版GMail了，然而交互性并沒有怎么提高，每一個點擊都對應一次刷新，沒有任何AJAX可言。

事實上，不用任何AJAX效果并不會讓你的iPhone Web App低人一等，如果有人譏笑你的應用沒有引入任何AJAX功能，你可以直接跟他說“GMail也沒有”。因此，如果你在開發的過程中決定不把任何時間投入到AJAX相關技術的研究，這是沒問題的，確保你的服務器響應速度，并且交互設計得當，那就行了。

以服務器端為中心的AJAX

接下來我們看看另外一些應用，例如之前說到的幾個，就拿最簡單的AppMarks來說說吧。首先，使用User Agent Switch更改你的Firefox的user-agent屬性，偽裝為iPhone，然后打開AppMarks，并且打開Firebug。接著點Menu -> Add -> Browse，看到出現AJAX請求了吧？猜猜這個請求是什么類型的，面向內容（傳輸更新上去的XHTML）、面向腳本（傳輸進行更新操作的JavaScript）還是面向數據（傳輸更新相關的JSON）？答案是——面向內容的！

這可是Web App哦，不是一般帶有一點點AJAX的網頁哦，我們要MVC，我們要“先進”的面向數據，為什么要“落后”的面向內容呢？至今為止，我們能夠看到的大部分iPhone Web Apps，都將MVC保留在服務器端了，客戶端唯一需要知道的就是內容更新，不存在任何的客戶端MVC模型。暫時我還沒看到有面向腳本或者面向數據的，如果你見到有應用這樣做了，請告訴我。

我們繼續說MVC的事情。現在大多應用的設計方式是這樣的：每一個應擁有一個view framework，然后每一次點擊所作的操作就是切換view。例如剛才說到的AppMarks，從Menu進入Add是一個view切換，不過因為Add這個view的內容是固定的，因此一早就包含在頁面里，不用AJAX請求直接加載就行了。另外一種情況，就是好像加載Browse那樣，是需要AJAX把view請求過來才能加載的。除了切換view，我們還需要action，例如提交數據就一定需要action的。說到這里，感覺是不是和RoR或者類似框架扯上關系了？事實上，RoR，或者類似框架，確實很適合用來做iPhone Web Apps。

以客戶端為中心的AJAX

那么除了RoR，我們還有別的選擇嗎？我們可以選擇使用一些客戶端框架來實現類似的效果。這樣說吧，類似RoR那樣每一個view都是一個模板，但不是rhtml，而是普通的html，沒有復雜邏輯，點擊連接后不是由RoR引擎調在服務器端用rhtml，而是客戶端自己直接攔截了鏈接點擊并用AJAX的方法去請求該html然后更新內容。這樣一個框架，可以在Wrox的Professional iPhone and iPod touch Programming : Building Applications for Mobile Safari一書中見到。這本書寫著2008年1月出版，但實際上已經出版，并且可以下載源代碼。我暫時還沒辦法買到這本書，但源代碼中就包括了這樣一個客戶端框架。

然而，這種以客戶端為中心的做法并沒有真正在客戶端引入一個MVC，它只是簡單地把服務器端的MVC裁減掉了，服務器端只能簡單的發送內容或響應提交，因此只適用于比上面的以服務器端為中心的模型更簡單的情景。如果你正在編寫的應用不涉及大量的提交操作，或者根本就是Web1.0網站，我的意思是，單向傳遞信息不接受任何用戶提交的網站，那么這種輕量級的模型就非常適用了。

小結：iPhone Web 開發應用 （下篇）的內容介紹完了，在文章里，我們介紹了三種常見的iPhone Web Apps交互方案，沒有哪一個是絕對更好或者更壞的，按照你當前開發的應用做出選擇吧。將來我們寫文章深入探討其中的一些實現細節，或者是交互模式，但前提是我先完成了幾個iPhone Web Apps。最后希望本文對你有所幫助。