網(wǎng)站開發(fā)適配iPad的7大技巧

蘋果新一代 iPad 的高 DPI 視網(wǎng)膜屏幕給網(wǎng)站在上面的顯示帶來困難，那么作為網(wǎng)站開發(fā)人員來說，應(yīng)該如何對新一代 iPad 進(jìn)行適配 呢？

正文：

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

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

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

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

那么對于新一代 iPad 下的網(wǎng)站圖片應(yīng)當(dāng)如何進(jìn)行適配呢？

方法是將現(xiàn)有圖片資源替換為雙倍尺寸的高質(zhì)量圖片資源后，再用 CSS 或 JS 進(jìn)行調(diào)整。這種方法原理是讓用戶下載雙倍尺寸的高質(zhì)量圖 片然后再重新調(diào)整回原有大小，蘋果官網(wǎng)已經(jīng)進(jìn)行了類似升級，領(lǐng)先支持 Retina 模式（只支持 Safari），它會自動推斷 設(shè)備的屏幕，如 果是 Retina 顯示屏，就會開啟 Retina 顯示器增強(qiáng)模式，調(diào)用雙倍尺寸的高質(zhì)量圖片資源先縮小后再重新放大進(jìn)行顯示。（具體其原理參 見高像素密度屏幕的適配）

2. 采納矢量格式圖片

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

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

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

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

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

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

無法適應(yīng)設(shè)備數(shù)量的增長和定位的模糊化。不同形式、不同大小的移動設(shè)備正在變得越來越多，各種移動設(shè)備之間的界限也逐漸被模糊化。 在這種情況下，很難通過“桌面版”和“手機(jī)版”這樣簡單粗暴的分類來滿足不同設(shè)備的需求。例如，面對一個(gè)六寸的平板設(shè)備，你應(yīng)該為 其適配手機(jī)版還是桌面版？

代碼版本增多，維護(hù)難度增加。同時(shí)維護(hù)多套界面加重了開發(fā)者的負(fù)擔(dān)。開發(fā)者將不得不分別維護(hù)多套代碼，承擔(dān)更多的工作量。

適配方式未必精準(zhǔn)。傳統(tǒng)做法需要推斷 不同的掃瞄 器和設(shè)備類型，然后適配不同版本的網(wǎng)頁，這樣的推斷 很容易出問題。例如下面是在 同一臺 Android 手機(jī)上用 Opera mini 和 Chrome Lite 打開某網(wǎng)站的情形。

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

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

5. 注意 iPad 上閱讀和點(diǎn)擊的不對稱

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

6. 去除 ：hover 偽類

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

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

在 iPad 用戶經(jīng)常把一些常去的網(wǎng)站的快捷方式添加到主屏幕上以方便訪問，如果你的網(wǎng)站沒有一個(gè) Icon 的話，系統(tǒng)會自動將網(wǎng)站縮略圖 作為圖標(biāo)，看起來相當(dāng)?shù)牟弧坝押谩薄Ｄ敲磩?chuàng)建一個(gè)主屏幕圖標(biāo)很困難嗎？不，非常簡單。

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