首先了解iPad開發(fā)的局限性

 

1、在iPad上使用Safari瀏覽普通網(wǎng)站網(wǎng)頁(yè)的時(shí)候，網(wǎng)頁(yè)因?yàn)樘蠖鴮?dǎo)致需要手動(dòng)放大縮小或者滑動(dòng)，雖然這種滑動(dòng)行為在iPad上市之初的各種宣傳中被津津樂道，但時(shí)間久了我們還是會(huì)發(fā)現(xiàn)這樣做并不方便，給用戶帶來的感受并不十分好。

 

2、不支持Flash

 

在沒有越獄的iPad Safari中，網(wǎng)站的Flash都是無法顯示的，但可以通過第三方軟件或插件或者瀏覽器來解決，不過，即使不能顯示Flash，你一樣能夠用HTML5和CSS3實(shí)現(xiàn)同樣的效果。

 

3、沒有鼠標(biāo)光標(biāo)

 

這意味著鼠標(biāo)屬性，例如鼠標(biāo)懸停屬性是不可能有的。

 

你或許可以為這個(gè)找到一些變通的辦法，但是到你的用戶那里這些該如何工作將會(huì)是困難的事。

 

4、滾動(dòng)條不能按照預(yù)期那樣起作用

 

滾動(dòng)條不能顯示包含了充滿過多分區(qū)的內(nèi)容?？蚣芤泊嬖诟叨群蛯挾鹊膯栴}。另外，滾動(dòng)過程中需要兩個(gè)手指的手勢(shì)。（我們將在下文中進(jìn)行充分的討論）

 

5、不支持CSS固定布局

 

HTML 元素 position:fixed CSS屬性不能正確顯示，常常會(huì)使得頁(yè)面停留在第一屏，無法向下翻頁(yè)、放大縮小。

 

設(shè)置viewpoint

 

viewpoint，可以理解為：視窗、可視區(qū)域，相對(duì)于iPad硬件限定的窗口來定義的。iPad窗口大小不可改變,但viewpoint視窗大小可以設(shè)置調(diào)整。

 

如果在iPhone開發(fā)中指定了視窗標(biāo)簽設(shè)置, 在iPad開發(fā)中必須進(jìn)行必要的校正。例如：

 

在iPhone中，我們會(huì)用下述代碼的方式指定屏幕寬度

 

 

而在iPad中，則必須用device-width替代具體的寬度像素?cái)?shù)。

 

 

我們?cè)谠O(shè)置寬度的同時(shí)可以設(shè)置可縮放的比例范圍

 

 

用 textareas 取代 contenteditable

 

iPhone和iPad瀏覽器不支持contenteditable元素。

 

默認(rèn)隱藏工具欄

 

iPhone的瀏覽器工具欄會(huì)在頁(yè)面最頂端，卷動(dòng)網(wǎng)頁(yè)后才隱藏。這樣在加載網(wǎng)頁(yè)完成后顯得很浪費(fèi)空間，特別是橫向屏幕時(shí)。我們可以讓它自動(dòng)卷動(dòng)上去。

 

 

iPad圖標(biāo)

 

iPad開發(fā)完成后，會(huì)體現(xiàn)圖標(biāo)的地方主要有：

 

iPad桌面，不大于72×72的png格式圖標(biāo)；

 

iPhone桌面，不大于57×57的png格式圖標(biāo)，在Xcode中的資源部分添加，并在xxxInfo.plist中設(shè)置Icon file屬性為添加的圖片資源名稱。

 

圖標(biāo)文件不需要做圓角和反光，iPad/iPhone自己會(huì)完成。

 

App Store中軟件簡(jiǎn)介中顯示的縮略圖，在打包生成zip文件的根目錄放置的文件名為iTunesArtwork的jpg圖片，大小要求在512×512以下 如果你的用戶將你的網(wǎng)站添加到home screen，iPhone會(huì)使用網(wǎng)站的縮略圖作為圖標(biāo)。然而你可以提供一個(gè)自己設(shè)計(jì)的圖標(biāo)，這樣當(dāng)然更好。圖片是57×57大小，png格式。不需要自己做圓角和反光，系統(tǒng)會(huì)自動(dòng)完成這些工作。然后將下面這條加入head中：

 

 

用iScroll控制你的觸摸滾動(dòng)

 

這是一個(gè)簡(jiǎn)單且最有用的源碼，能夠幫助你控制你的網(wǎng)絡(luò)應(yīng)用程序。由Matteo Spinelli創(chuàng)作，iScorll是一個(gè)開發(fā)項(xiàng)目，因?yàn)榫W(wǎng)絡(luò)瀏覽器引擎Webkit工具套件（用于iPhone,iPod,iPad,Android 以及Palm上）不提供本地方式去滾動(dòng)文章內(nèi)部一個(gè)固定的高度/寬度元素。

 

這種不幸的情況防止任何Web應(yīng)用程序有一個(gè)頭和/或頁(yè)腳的 position:absolute CSS屬性，并滾動(dòng)中心區(qū)域的內(nèi)容。

 

iScroll代碼非常易于使用。如果你喜歡iScroll，你需要這些類似的jQuery插件：jQuery Swipe和JQTouch

---