相信不少人都體驗過新一代 iPad 了，其搭載的標志性的 9.7 英寸 Retina Display（視網(wǎng)膜屏幕）分辨率達到了前所未有 2048 x 1536 的分辨率，如此高分辨率給當前很多網(wǎng)站在 iPad 上的顯示帶來了難題。有人說，還不至于單獨為新一代 iPad 這一個設(shè)備進行相應(yīng)適配，但隨著用上新一代 iPad 用戶的逐漸增多，未來筆記本已經(jīng)開始有視網(wǎng)膜屏幕普及的趨勢，Retina Display 成為標配的視網(wǎng)膜時代有望到來，這使得針對網(wǎng)站適配的重要性日趨凸顯，而絕非單獨為一款設(shè)備進行設(shè)備。

接下來我們應(yīng)當如何調(diào)整網(wǎng)站的開發(fā)，對新一代 iPad 進行適配呢？

1. 適配視網(wǎng)膜屏幕

想起在“迎接視網(wǎng)膜時代” Procaine 的評論“草榴表示對視網(wǎng)膜屏壓力很大”，除了好笑外，也不失道理。因為對于網(wǎng)頁顯示來說，在 iOS 系統(tǒng)下矢量字體的自動改變使其根本勿需擔(dān)心適配問題，但是對于圖片來說就不是那么一回事了。當前很多網(wǎng)站對于圖片的顯示并沒有適配機制，如果繼續(xù)以原有大小在視網(wǎng)膜屏幕展示的話，就會出現(xiàn)馬賽克模糊，與未適配應(yīng)用下的部分圖片素材造成的 UI 模糊類似。

2. 采用矢量格式圖片

應(yīng)當盡量將點陣圖片（位圖）資源替換為矢量圖片，否則在進行圖片自動放大適配過程中會出現(xiàn)鋸齒，嚴重影響顯示效果。而采用矢量圖片就不用擔(dān)心進行放大適配后的失真。

3. 注意同時為橫屏和豎屏進行優(yōu)化

大部分用戶在 PC 端瀏覽網(wǎng)頁時，顯示器都是處于橫屏模式的，并且大部分 PC 顯示器也都只適合橫向使用。但用戶在使用 iPad 瀏覽網(wǎng)頁時，因為 iPad 是可以旋轉(zhuǎn)的，因此除了橫向視圖外，縱向視圖也是用戶經(jīng)常處于的場景。

當為 iPad 開發(fā)網(wǎng)站時，必須同時對橫屏模式和豎屏模式下的顯示效果進行測試和優(yōu)化。尤其是在豎屏模式下網(wǎng)站的元素和文字都會縮小，可用 -webkit-text-size-adjust 這個 Webkit 的私有 CSS 來阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大小。如果不加優(yōu)化，則很有可能會損害用戶的閱讀體驗。

4. 使用自適應(yīng)的網(wǎng)頁設(shè)計方式

傳統(tǒng)上，很多網(wǎng)頁開發(fā)者會為自己的網(wǎng)站提供一個桌面版和一個手機版，甚至還會有一個平板電腦版或者 iOS 專用版，以適應(yīng)不同設(shè)備用戶的使用需求。這樣的做法會造成以下后果：

• 無法適應(yīng)設(shè)備數(shù)量的增長和定位的模糊化。不同形式、不同大小的移動設(shè)備正在變得越來越多，各種移動設(shè)備之間的界限也逐漸被模糊化。在這種情況下，很難通過“桌面版”和“手機版”這樣簡單粗暴的分類來滿足不同設(shè)備的需求。例如，面對一個六寸的平板設(shè)備，你應(yīng)該為其適配手機版還是桌面版？
• 代碼版本增多，維護難度增加。同時維護多套界面加重了開發(fā)者的負擔(dān)。開發(fā)者將不得不分別維護多套代碼，承擔(dān)更多的工作量。
• 適配方式未必精準。傳統(tǒng)做法需要判斷不同的瀏覽器和設(shè)備類型，然后適配不同版本的網(wǎng)頁，這樣的判斷很容易出問題。例如下面是在同一臺 Android 手機上用 Opera mini 和 Chrome Lite 打開某網(wǎng)站的情形。

在這樣的情況下，使用自適應(yīng)的網(wǎng)頁設(shè)計方式是一種更簡單也更有價值的做法。開發(fā)者將只需要維護一套代碼，代碼將訪問者所持設(shè)備的不同參數(shù)自動呈現(xiàn)不同的顯示效果，即達到"一次設(shè)計，普遍適用"，讓同一個網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局。這樣網(wǎng)站在不同設(shè)備上的顯示效果將更為靈活，更好地滿足不同設(shè)備用戶的瀏覽需求。

開發(fā)者可以通過采用 CSS 3 的 Media Query 屬性等方式來進行自適應(yīng)的網(wǎng)絡(luò)設(shè)計。如果需要兼容不支持 CSS 3 的舊版瀏覽器的話，則可以使用 CSS3-mediaqueries-js 等方式來實現(xiàn)，這一方式甚至可以支持 IE 5 和 Opera 7 等老舊和小眾的瀏覽器。

5. 注意 iPad 上閱讀和點擊的不對稱

對于網(wǎng)站來說，iPad 上用戶的閱讀和點擊是不對稱不平衡的，因為傳統(tǒng)網(wǎng)站上的字體偏小，雖然在 iPad 上可以輕松閱讀，但是卻不夠方便點擊。在新一代 iPad 上雖然 DPI 更高，文字閱讀起來更加清晰，但是作為點擊目標的話還是太小，用戶發(fā)現(xiàn)率低。因此要避免小的鏈接，采用大塊區(qū)域（如圖片等）作為點擊鏈接，除了提高發(fā)現(xiàn)率外還可以降低用戶的誤點擊率。

6. 去除 :hover 偽類

在 iPad 和其他觸摸屏設(shè)備上是沒有鼠標指針的，因此也就沒有 hover事件，CSS 的 :hover 偽類也就沒有用處。但是可以用 Touch 事件來模擬 hover，用點擊動作來取代鼠標劃過效果，從而實現(xiàn)交互。

7. 創(chuàng)建主屏幕圖標

在 iPad 用戶經(jīng)常把一些常去的網(wǎng)站的快捷方式添加到主屏幕上以方便訪問，如果你的網(wǎng)站沒有一個 Icon 的話，系統(tǒng)會自動將網(wǎng)站縮略圖作為圖標，看起來相當?shù)牟?rdquo;友好“。那么創(chuàng)建一個主屏幕圖標很困難嗎？不，非常簡單。

你只需要在你的網(wǎng)站上傳一張 PNG 透明圖片，并將其設(shè)置為網(wǎng)站的 Icon file 屬性，不需要做圓角和反光，iPad 會自己會完成，示例如下。