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

 

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

 

2、不支持Flash

 

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

 

3、沒有鼠標光標

 

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

 

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

 

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

 

滾動條不能顯示包含了充滿過多分區(qū)的內(nèi)容。框架也存在高度和寬度的問題。另外，滾動過程中需要兩個手指的手勢。（我們將在下文中進行充分的討論）

 

5、不支持CSS固定布局

 

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

 

設(shè)置viewpoint

 

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

 

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

 

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

 

 

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

 

 

我們在設(shè)置寬度的同時可以設(shè)置可縮放的比例范圍

 

 

用 textareas 取代 contenteditable

 

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

 

默認隱藏工具欄

 

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

 

 

iPad圖標

 

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

 

iPad桌面，不大于72×72的png格式圖標；

 

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

 

圖標文件不需要做圓角和反光，iPad/iPhone自己會完成。

 

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

 

 

用iScroll控制你的觸摸滾動

 

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

 

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

 

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

---