視網膜New iPad與普通分辨率iPad頁面的兼容處理

1、這是篇經驗分享

就算不是果粉也應該知道，iPad2與new iPad的重大區別之一就是顯示屏的分辨率。new iPad顯示屏被稱之爲「視網膜顯示屏」，其設備分辨比（以前有詳細介紹，點擊這裏查看）是iPad2的兩倍。 – iPad mini也是普通分辨比。

iPad2與new iPad同時顯示一個頁面，寬度都是1024像素的，那差異在什麼地方呢？——就在於new iPad每一個像素點實際上有4倍的普通像素點，以下示意(© smashingmagazine)：

咱們使用CSS設置的像素值(px)屬於普通像素點，或者稱之爲標準像素點。

所以，一張200×200尺寸的圖片，咱們設置以下CSS:

img {
    width: 200px;
    height: 200px;
}

在iPad2或Mini iPad中就是很正常顯示的圖片；可是，在New iPad中，1個CSS像素點實際上有4個位圖像素點，1個分紅4個，顯然不夠分啊，只能顏色近似選取，因而，圖片感受就是模糊的(© smashingmagazine)！

所以，要想讓視網膜屏幕下的圖片高清晰顯示，咱們須要的圖片的原始大小不能是200×200像素，而須要2倍高寬，即400×400像素，CSS像素限制依然是：

img {
    width: 200px;
    height: 200px;
}

此時，視網膜屏幕下圖片就顯示OK了（非視網膜屏幕圖片被壓縮-減小像素取樣——資源浪費！）(© smashingmagazine)：

所以，這種不一樣iPad上不一樣的像素分辨比是兼容處理的大頭！

近期折騰的一個pad相關項目基本上進入尾聲，產品嘛就那樣，跟點評的比差距很大，差距不在於技術實現……畢竟不是優秀方驅動的……（沒忍住仍是吐槽下吧~）比方說，建鐵路，線路急急忙忙規劃好，結果造路的時候發現花崗岩地質，此時最大權衡的方法是修改設計路線，結果是一聲口號：工人們，我對大家的技術信得過，你們不畏艱難險阻，一塊兒上吧……結果你們都懂的——經過技術彌補設計缺陷是很傻逼的！

鏡花水月，飄渺浮雲，不少事情不是一人能左右的。仍是作點實在的事情：釣釣魚，分享些技術心得，可能價值更大些，哈哈！

2、關於設計圖

設計圖必定要是針對高清設計的，即寬度爲2048像素。爲何呢？歷史是向前的，向下兼容纔是王道與趨勢。

在定元素的CSS像素尺寸的時候，設計圖size除以2就是準確值。例如，設計圖上這個：

3、CSS圖形生成

顯然，一些圓角，以及漸變之類，使用CSS3實現，這樣，不管是高清屏仍是普通屏，都顯示很贊，尤爲在New iPad上，顯示效果然的很讚的！

例如上面的那個券字圖標，裏面的文字就是文字，後面的漸變以及圓角都是CSS實現，代碼以下：

.priv_icon_coupon {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 0.1em;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#EF137A), to(#9C117A));
    font: bold 50px/64px "微軟雅黑";
    color: #fff;
    text-align: center;
    text-shadow: 0 1px rgba(0,0,0,.5);
}

<span class="priv_icon_coupon">券</span>

以下Chrome瀏覽器下的效果，New iPad顯示效果很細膩（恕我弄不到截圖，我就想啊，總不能用個人諾基亞手機拍下來展現吧~~）

或者下面的圖形效果等等（Chrome瀏覽器下截圖），均可以使用CSS實現——無需擔憂IE之類的兼容問題！

4、自定義圖標字體(Icon Fonts)

並非全部的圖形均可以使用CSS生成的，例如不少的純色小圖標。此時，咱們能夠藉助另外一項技術：自定義圖標字體！

我是利用IcoMoon的免費開源圖標字體進行製做的，根據設計圖選擇合適的小圖標們，生成自定義字體，以前有詳細介紹，點擊這裏查看詳情！

有人曾像我抱怨，該網站更新太快，不能用。其實徹底不用擔憂，首先，在同一現代瀏覽器上，您選擇的字體其會本地存儲下來，下次打開的時候會自動顯示您以前的選擇；再者，就算本地信息被remove掉，您也能夠經過導入以前生成的SVG字體文件進行新的編輯與生成！

下圖爲我在項目中使用到的全部圖標字體：

相關CSS以下：

/* custom fonts */ @font-face {
    font-family: ico;
    src: url(/b/pad/font/icomoon.eot);
    src: url(/b/pad/font/icomoon.eot?#iefix) format('embedded-opentype'),
        url(/b/pad/font/icomoon.woff) format('woff'),
        url(/b/pad/font/icomoon.ttf) format('truetype'),
        url(/b/pad/font/icomoon.svg#icomoon) format('svg');
}

固然，傳統web開發的@font-face相關代碼與上面仍是有差別的（這裏無需關心低版本IE瀏覽器），具體能夠查看我以前的「CSS3 @font-face實現顏色大小可控的三角效果」一文。

使用自定義字體圖形的好處就是，不管你屏幕的像素比多高，個人圖形都是細膩的平滑的，越高像素比效果越好！所以，iPad2與iPad3之間屏幕分辨率差別問題就無需擔憂！

例如，在Chrome瀏覽器下，我用鼠標把頁面比例搞得蠻大的，效果也是平滑的：

5、使用SVG背景

本項目中，我並無使用過SVG背景，不過以前的手機項目到時使用過，與之相似的，能夠解決高清iPhone與普通iPhone的兼容性問題，具體可查看前文「SVG特徵、支持以及一些實際使用問題」。

其中，舉例了實現下圖的波波效果：

該SVG文件能夠點擊這裏查看：circle.svg

該SVG文件是本身繪製的，若是您也想本身繪製建立SVG文件，能夠參見這裏。

6、background-size下的向下兼容

有些小圖標，設計師把它弄成漸變的，帶邊框的，不規則的，這時候，自定義字體搞不定（文字漸變僅部分支持），SVG也搞不定（本身畫圖功力有限，55555555），不得已，仍是使用傳統的圖片。

這時候，偶的策略是這樣子的，高清圖片上原始大小摳出這些小圖標，使用background-size進行尺寸限制，優先高清設備；由於都屬於小圖標，所浪費的尺寸大小有限，權衡來看，是最佳策略。

例以下面這個設計效果：

弄出來的圖片信息以下：

可見，高度僅爲設計圖上的原始高度。在實際CSS處理的時候，尺寸1/2限制，代碼以下：

star, .star_in {
    background: url(star.png) repeat-x;
    background-size: 14px 30px; /* 原始大小28x60 */ }
...

因而，最終，高清new iPad下高清顯示，效果槓槓的；普通pad上圖片1/2壓縮，效果也還好，也算清楚！

固然，若是你精力夠多，追求完美，也可使用CSS進行精確控制，例如：

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5) { /* 當設備像素比不小於1.5的時候... */ }

7、最難處理的普通的img圖片們

展現性的圖片是最難處理的。

例如，一個餐廳圖片，CSS限制的像素寬度是480×320, 若是咱們直接顯示480*320像素的圖片，則在高清設備下，圖片至關於2倍拉伸的效果 – 模糊！若是限制高清的960*640圖片，Oh, my gaga! 這增長的圖片尺寸大小估計有4倍之多，也就是說，普通iPad上，3/4的圖片流量是多餘的，浪費的，關鍵顯示的效果還不如480*320像素的好！如何權衡，如何博弈！？

理論上講，最佳的作法是，不一樣的屏幕設備顯示不一樣的大小圖片。具體作法以下：

1. 準備幾套套圖片，大小高寬正好2倍或1.5倍差別（只是iPad開發的話，只要兩套），圖片的路徑要能夠彰顯其比例大小。例如：

   /1/a.jpg
   /1.5/a.jpg
   /2/a.jpg

2. 經過設備像素比devicePixelRatio來決定到底使用哪張圖片。例如，高清iPad下，window.devicePixelRatio爲2, 所以，咱們的圖片HTML應該是：

   <img src="/2/a.jpg" />

3. 能夠經過url或ajax請求形式將devicePixelRatio大小通知後臺，以實現HTML的完美輸出；或者圖片具體顯示哪一個URL使用JavaScript進行控制，如：

   <img src="佔位.jpg" data-url="/1/a.jpg" data-url2="/2/a.jpg" width="240" height="180" />

   var eleImg = $("img"), ratio = window.devicePixelRatio;
   eleImg.attr("src", eleImg.attr(ratio  > 1.5? "data-url2": ""data-url"));

可是，上面的作法只是理論的作法。實際上，若是徹底按照上面的實踐，會遇到不少阻礙——資源、配合、實施以及最終效果等！說白了，就是很是的折騰，工做量大；最後說不定還吃力不討好——老闆拿着個高清iPad在咆哮：怎麼這個瀑布流頁面的圖片加載這麼慢啊！！

仍是那句話，一切在於權衡！

大衆點評iPad高清版，餐廳詳情頁面的特點菜圖片都是模糊的（圖在我眼中，弄不下來~）；能夠看到，大衆點評可能選擇了速度，而不是圖片的顯示質量（由於這裏的特點菜圖片可能上百之多——雖然使用了動態加載）！

可是，對於某些特殊圖片，到時能夠作一些兼容處理。

例如，餐廳位置的Google靜態圖片（截圖有縮放）：

若是不考慮new iPad等視網膜屏幕設備，直接下面的Code就能夠搞定了：

<img src="http://maps.google.com/maps/api/staticmap?center=31.230393,121.473704&zoom=12&size=300x210&sensor=false" height="210" width="300" />

以下效果（非截圖）：

可是，上面這個圖在最新的iMac上或者new iPad上就是模糊的，跟旁邊細膩的文字，圖標混在一塊兒，顯得十分的不和諧；咱們有必要進行特殊處理。

很簡單，new iPad上圖片兩倍大小就能夠了，所以，上面的size=300x210咱們改爲size=600x420，而後，把縮放比例zoom=12再提升一點就能夠了，好比說zoom=16.

所以，new iPad下HTML代碼爲：

<img src="http://maps.google.com/maps/api/staticmap?center=31.230393,121.473704&zoom=16&size=600x420&sensor=false" height="210" width="300" />

以下效果（非截圖）：

至於如何讓不一樣屏幕顯示不一樣圖片，那就是你的事情了，方法多多，狀況不一樣使用方法不同。

例如，我這裏餐廳的信息（包括靜態地圖位置）都是Ajax load HTML載入的，所以，我只須要在Ajax請求的時候，將iPad的設備像素比devicePixelRatio值發給後臺，其餘的事情，就交給後臺他們去判斷、去輸出了！

我對靜態地圖研究不是很深，這裏可能有處理不當的地方，歡迎同行指正，不甚感謝！

8、哦，莫非這是結語

本文的內容其實不僅受用於iPad的頁面製做，還有手機。隨着視網膜桌面顯示器愈加的普及（如2012款iMac採用了」視網膜」屏幕，之後，其餘一些顯示器們也會跟風，作噱頭的~~），咱們傳統web的頁面開發也將面對新的挑戰——不只要處理不一樣的顯示屏分辨率，還要處理不一樣的設備像素比！

看來蘋果公司想顛覆的東西波及甚廣，爾等估計也不能倖免了。

發展很快，止步不前，容易淘汰；機遇與挑戰共存，加油吧，阿郎！