【IT168 技術(shù)】如果你是一名Web開發(fā)人員，你可能會(huì)認(rèn)為查看源代碼和創(chuàng)建一個(gè)可以在iPhone上運(yùn)行的站點(diǎn)或應(yīng)用程序是最煩惱的。本文就介紹一些iPhone開發(fā)的技巧和忠告，如果你尚未購買iPhone真機(jī)，你可以使用模擬器進(jìn)行練習(xí)。
1. 文檔和iPhone模擬器
當(dāng)Peter-Paul Koch在iPhone上玩Safari時(shí)他宣傳“文檔?沒有”，至那以后情況開始逐漸改變，蘋果公司現(xiàn)在已經(jīng)將與iPhone有關(guān)的Web開發(fā)信息都放到Safari文檔中了。
iPhone SDK(軟件開發(fā)工具包)包含了一個(gè)iPhone模擬器，如果你已經(jīng)擁有一部iPhone那這會(huì)很方便，當(dāng)然如果你加入了iPhone大軍，這是必不可少的了，如果想要使用它，必須先注冊成為一名iPhone開發(fā)人員，并安裝iPhone SDK，安裝好后可以在/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications找到iPhone模擬器。
2. 小屏幕CSS
iPhone和PC或Mac機(jī)最大的不同就是它的屏幕更小，如你的頁面可以在桌面瀏覽器和屏幕閱讀程序中運(yùn)行，最簡單的辦法是為iPhone編寫?yīng)毩⒌臉邮奖?，下面是要使用到的?biāo)記：
這里的link單元使用了media查詢目標(biāo)設(shè)備，最大寬度設(shè)為480像素，也就是iPhone在橫向時(shí)可用的寬度，對于IE 5.5或更早的版本需要使用IE附加條件的注釋，這些版本都缺乏media查詢支持，將為iPhone載入樣式表，我們還是以一個(gè)例子進(jìn)行說明。
在例1中(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css.html)，我們將看到在iPhone瀏覽器上顯示一個(gè)紅框的頁面，在其它瀏覽器上就顯示藍(lán)色。common.css文件包括了所有瀏覽器的樣式，其內(nèi)容如下：
從上面的代碼可以看出其定義了藍(lán)色框。另一個(gè)small-screen.css文件是為所有小屏幕設(shè)備定義的樣式，其內(nèi)容如下：
它定義了紅色的背景。
如果你只愿意定義一個(gè)樣式表，你可以使用@media塊向主樣式表中只添加iPhone樣式表即可，如：
在例2(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/small-screen-css-inline.html)中我們可以看到一個(gè)內(nèi)聯(lián)樣式表，在它使用的樣式表文件onestyleforall.css中，你可以看到在@media塊中為紅色背景進(jìn)行了聲明。
默認(rèn)情況下，iPhone上的Safari會(huì)象在大屏幕的桌面瀏覽器那樣顯示你的頁面，寬度達(dá)到了980像素，然后縮小內(nèi)容以適應(yīng)iPhone的小屏幕，因此用戶在iPhone看這個(gè)頁面時(shí)感覺字體就比較小了，也比較模糊，必須要放大才能看得真切，對于一個(gè)普通的Web頁面似乎可以接受，但對于一個(gè)常用的應(yīng)用程序就沒幾個(gè)人能夠受得了。
幸運(yùn)的是可以使用特殊的Meta元素可視區(qū)進(jìn)行糾正：
這個(gè)元素通知瀏覽器使用設(shè)備的寬度作為可視區(qū)的寬度，而不是默認(rèn)的980像素了，我們可以看看兩個(gè)不同的例子。
例3(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/no-viewport.html)顯示了一個(gè)簡單的段落元素，沒有Meta元素可視區(qū)，字體有點(diǎn)模糊。在iPhone中運(yùn)行的實(shí)際情況如下圖所示。
圖 1 無可視區(qū)的顯示效果
例4(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/viewport.html)包括了一個(gè)可視區(qū)元素，現(xiàn)在設(shè)備寬度只有320像素，字體也比前一個(gè)例子更清晰了。在iPhone中運(yùn)行的實(shí)際情況如下圖所示。
圖 2 有可視區(qū)的顯示效果
另外，你還可以手動(dòng)設(shè)置device-width的值，例如，假設(shè)你的博客頁面的寬度是750像素，那么桌面屏幕最佳大小就是800x600像素，例5(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750.html)顯示了一個(gè)刪減版本，如果你在iPhone中瀏覽它，你會(huì)看到980像素剩下的空間都填充了白色。
為了消除額外的空間，可以使用meta元素可視區(qū)將寬度設(shè)為780像素：
例6(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區(qū)布局被固定后的效果。
Meta元素可視區(qū)的內(nèi)容可以包括多個(gè)逗號分隔的值，如initial-scale – 用戶最初看到頁面時(shí)的放大級別，對于Web應(yīng)用程序，一個(gè)常見的設(shè)置是：
這個(gè)元素設(shè)置寬度為設(shè)備的最大寬度，禁止用戶放大和縮小。
4. 方向變化
你的頁面和應(yīng)用程序可以在兩個(gè)方向上查看：縱向和橫向。如果你的應(yīng)用程序可以根據(jù)不同的方向進(jìn)行變化，那將非常的酷。
使用Javascript可以獲得window.orientation的屬性，它包含以下值：
l 0 – 正常的縱向方向(開始按鈕在下方)
l -90 – 從縱向順時(shí)針旋轉(zhuǎn)后的水平方向(開始按鈕在左方)
l 90 – 從縱向逆時(shí)針旋轉(zhuǎn)后的水平方向(開始按鈕在右方)
l 180 – 目前還不支持，但應(yīng)該是縱向旋轉(zhuǎn)(開始按鈕在上方)
當(dāng)用戶傾斜設(shè)備時(shí)，你可以使用orientationchange事件來執(zhí)行一個(gè)動(dòng)作，下面是一個(gè)簡單的例子，無論何時(shí)當(dāng)方向發(fā)生變化時(shí)彈出一個(gè)警告提示，顯示window.orientation的值：
可以在例7(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/orientation-change.html)中看到它是如何工作的，旋轉(zhuǎn)電話時(shí)就會(huì)看到警告，在iPhone模擬器中，在硬件菜單下可以看到旋轉(zhuǎn)選項(xiàng)，如下圖所示。
圖 3 旋轉(zhuǎn)設(shè)備時(shí)彈出警告信息
5. 特定方向樣式
有時(shí)你可能需要依靠方向使用樣式格式化你的內(nèi)容，需要三個(gè)簡單的步驟：
1. 在我們的標(biāo)記中，給body單元添加一個(gè)類名(可以使用portrait和landscape)
2. 在我們的樣式表中，為body.portrait和body.landscape指定不同的內(nèi)容樣式，以及需要它的子元素
3. 當(dāng)方向變化時(shí)使用Javascript更新body單元的class屬性的值
因此第一步是增加一個(gè)默認(rèn)的類名，如：
然后添加樣式：
最后是Javascript，我們需要使用：
1. 一個(gè)load事件監(jiān)聽器，設(shè)置最初的 類名
2. 一個(gè)orientationchange事件監(jiān)聽器
3. 一個(gè)發(fā)生orientationchange事件時(shí)交換類名的函數(shù)
我們來看看事件監(jiān)聽器：
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
下面是改變body單元上類名的setOrientation函數(shù)：
例8(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/orientation-styles.html)顯示了這些特定方向的樣式。使用iPhone瀏覽這個(gè)地址的效果如下圖所示。
圖 4 特定方向的樣式
6. 隱藏工具欄
你可能已經(jīng)注意到在iPhone上第一次載入某個(gè)頁面時(shí)，URL工具欄是可見的，但往下滾動(dòng)頁面時(shí)，ULR工具欄就消失了。
圖 5 有URL工具欄
如果你想讓你的Web應(yīng)用程序看起來更象一個(gè)本地iPhone應(yīng)用程序，可能會(huì)想到在頁面載入時(shí)移除掉工具欄，實(shí)現(xiàn)起來其實(shí)很簡單，只需要使頁面向下滾動(dòng)1個(gè)像素即可，如：
例子9(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/hide-toolbars.html)顯示了這個(gè)行為。使用iPhone瀏覽這個(gè)地址的效果如下圖所示。
圖 6 無ULR工具欄
如果你也的頁面太短不能滾動(dòng)怎么辦?這個(gè)時(shí)候我們需要添加一個(gè)額外的meta元素，以便讓頁面可以滾動(dòng)，使用meta元素設(shè)置可視區(qū)的高度：
7. 圓角
你可以使用你熟悉的桌面瀏覽器中的圓角方法，如果你的目標(biāo)只有Safari，那還可以使用-webkit-border-radius CSS擴(kuò)展，對于Firefox 有一個(gè)類似的-moz-border-radius，但在IE和Opera中會(huì)顯示為一個(gè)簡單的方框。
例10(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/rounded.html)顯示了div元素上的圓角。使用iPhone瀏覽這個(gè)地址的效果如下圖所示。
圖 7 圓角效果
8. 觸摸事件
當(dāng)然，在使用iPhone時(shí)你可以使用手指代替鼠標(biāo)，最酷的是支持多點(diǎn)觸摸，在iPhone上鼠標(biāo)事件被觸摸事件替代了，包括：
l touchstart
l touchend
l touchmove
l touchcancel
當(dāng)你發(fā)出這些事件時(shí)，事件監(jiān)聽器將會(huì)接收一個(gè)event對象，event對象有些重要的熟悉，如：
l touches – 觸摸對象的集合，觸摸屏幕的每個(gè)手指一個(gè)，touch對象有pageX和pageY屬性，包含了在頁面上觸摸的坐標(biāo)。
l targetTouches – 和touches類似，但它只登記對目標(biāo)元素的觸摸，而不是整個(gè)頁面。
下面的例子是拖放的一個(gè)簡單實(shí)現(xiàn)，我們在空白頁面上放一個(gè)方框，然后進(jìn)行拖動(dòng)，你需要的做的就是訂閱touchmove事件，然后隨手指移動(dòng)更新方框的位置，如：
Touchmove事件監(jiān)聽器首先取消手指移動(dòng)的默認(rèn)行為，event.targetTouches集合包括一列每個(gè)手指所在的當(dāng)前div元素的數(shù)據(jù)，我們只需要關(guān)心一個(gè)手指，因此我們使用event.targetTouches[0]，pageX向我們提供了手指的X坐標(biāo)，根據(jù)這個(gè)值減去div寬度的一半，以便手指保留在方框中的中間。
在例11(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/drag.html)中我們將所有代碼集中到一起了。
9. 手勢
在iPhone上，手勢是兩個(gè)手指的行為：縮放(放大和縮小)和旋轉(zhuǎn)。前面我們已經(jīng)學(xué)習(xí)了touches和targetTouches事件包含了每個(gè)手指觸摸設(shè)備的信息，使用這些事件也處理手勢，如放大和平移，但還有更方便的gesture事件可用，你可以監(jiān)聽下面的事件：
l gesturestart
l gestureend
l gesturechange
在接下來的例子中我們將監(jiān)聽gesturechange事件，然后使用webkitTransform樣式屬性縮放和旋轉(zhuǎn)一個(gè)div，像往常一樣，事件監(jiān)聽器接收event對象參數(shù)，event對象包含以下屬性：
l event.scale – 不縮放時(shí)值為1，縮小時(shí)值小于1，放大時(shí)值大于1
l event.rotate – 旋轉(zhuǎn)的角度
代碼和前面的觸摸—拖動(dòng)代碼非常類似：
例12(鏈接：http://www.sitepoint.com/examples/iphone-development-12tips/gesture.html)顯示了運(yùn)行這段代碼的效果，縮放和旋轉(zhuǎn)一個(gè)div。如果你在iPhone模擬器中瀏覽，按住選項(xiàng)鍵，將會(huì)顯示兩個(gè)灰色的點(diǎn)，表示兩個(gè)手指，當(dāng)你拖動(dòng)鼠標(biāo)時(shí)，可以將圓點(diǎn)移進(jìn)和移出。
圖 8 縮放和旋轉(zhuǎn)
10. 特殊鏈接
當(dāng)你瀏覽一個(gè)有電話號碼的頁面時(shí)，可以直接按號碼就可以打出電話，這時(shí)電話號碼自動(dòng)變成鏈接，當(dāng)然它們遵循電話號碼的格式，但有時(shí)你可能要手工創(chuàng)建一個(gè)電話號碼鏈接，這時(shí)你可以使用tel:前綴(URI模式)，如：
如果是SMS文本，那可以使用sms:前綴，啟動(dòng)iPhone的文本消息應(yīng)用程序：
iPhone上還有一些其它特殊功能的特殊鏈接，如：
l 鏈接到iTunes Store可以啟動(dòng)iTunes，你可以在iTunes Store中通過搜索獲得一個(gè)鏈接，然后在搜索結(jié)果上點(diǎn)擊右鍵，選擇“復(fù)制iTunes Store URL”，另一個(gè)辦法是使用iTunes鏈接制作程序，它生成HTML標(biāo)記，包括一個(gè)很好的標(biāo)題和iTunes圖形按鈕。
l 鏈接到Google Maps可以啟動(dòng)Maps應(yīng)用程序。
l YouTube鏈接將會(huì)啟動(dòng)本地YouTube應(yīng)用程序，而不是YouTube站點(diǎn)。
l 鏈接到電子郵件地址將會(huì)啟動(dòng)Mail應(yīng)用程序。
11. 首頁圖標(biāo)
要想讓訪問者喜歡上你的站點(diǎn)，那你的首頁就得做漂亮點(diǎn)，當(dāng)某個(gè)用戶將你的站點(diǎn)添加到首頁屏幕時(shí)，iPhone將會(huì)使用你的頁面屏幕截圖作為首頁圖標(biāo)，但也可以自己創(chuàng)建一個(gè)更好看的圖標(biāo)。
首先創(chuàng)建一個(gè)57x57像素的png文件apple-touch-icon.png，然后將它放到Web服務(wù)器的根目錄下，iPhone將會(huì)自動(dòng)添加光滑和圓角效果。
圖 9 左邊是原圖，右邊是iPhone自動(dòng)處理后的首頁圖標(biāo)
你也可以通過link元素靈活指定圖標(biāo)的位置和文件名，這允許你使用一個(gè)不同的Web服務(wù)器，如內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)，它會(huì)托管圖標(biāo)或跨多個(gè)站點(diǎn)共享相同的文件，為了指定圖標(biāo)的位置，可以采用下面的語法：
12. 調(diào)試：查看源代碼和控制臺
想要查看源代碼?這在iPhone上有點(diǎn)不方便，幸運(yùn)的是在iPhone上Safari支持書簽，因此你可以使用書簽添加丟失的功能，那該怎么做呢?
首先可以通過Javascript的document.documentElement.innerHTML訪問到頁面的源代碼，在你的書簽中只有問題就是該以什么方式來顯示，例如，在一個(gè)新窗口中，好消息是這個(gè)Javascript可以通過書簽來執(zhí)行，iPhoneWebDev已經(jīng)打包了許多書簽，并且專為iPhone進(jìn)行了優(yōu)化，可以直接使用，如果你有一個(gè)需要的書簽，只需要從Itunes同步到iPhone即可。
至于調(diào)試，iPhone包含了一個(gè)調(diào)試控制臺，你可以進(jìn)入Safari的設(shè)置程序中，選擇開發(fā)人員，將調(diào)試控制臺設(shè)為開啟狀態(tài)，之后就會(huì)顯示在Safari瀏覽器URL工具欄的下方，它會(huì)顯示頁面的錯(cuò)誤，你也可以使用控制臺對象從Javascript編寫調(diào)試消息，如：
非常高興你閱讀完本文，歡迎你進(jìn)入令人興奮和具有挑戰(zhàn)的iPhone開發(fā)領(lǐng)域，我希望你馬上動(dòng)手實(shí)驗(yàn)。
