一、這是篇經驗分享
?
就算不是果粉也應該知道，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相關項目基本上進入尾聲，產品嘛就那樣，跟點評的比差距很大，差距不在于技術實現……畢竟不是優秀方驅動的……（沒忍住還是吐 槽下吧~）比方說，建鐵路，線路急急忙忙規劃好，結果造路的時候發現花崗巖地質，此時最大權衡的方法是修改設計路線，結果是一聲口號：工人們，我對你們的 技術信得過，大家不畏艱難險阻，一起上吧……結果大家都懂的—— 通過技術彌補設計缺陷是很傻逼的！
?
鏡花水月，飄渺浮云，很多事情不是一人能左右的。還是做點實在的事情：釣釣魚，分享些技術心得，可能價值更大些，哈哈！
?
二、關于設計圖
?
設計圖一定要是針對高清設計的，即寬度為2048像素。為什么呢？歷史是向前的，向下兼容才是王道與趨勢。
?
在定元素的CSS像素尺寸的時候，設計圖size除以2就是準確值。例如，設計圖上這個：
?
三、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之類的兼容問題！
?
四、自定義圖標字體(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瀏覽器下，我用鼠標把頁面比例搞得蠻大的，效果也是平滑的：
?
五、使用SVG背景
?
本項目中，我并沒有使用過SVG背景，不過之前的手機項目到時使用過，與之類似的，可以解決高清iPhone與普通iPhone的兼容性問題，具體可查看前文“ SVG特征、支持以及一些實際使用問題 ”。
?
其中，舉例了實現下圖的波波效果：
?
該SVG文件可以點擊這里查看： circle.svg
?
該SVG文件是自己繪制的，如果您也想自己繪制創建SVG文件，可以 參見這里 。
?
六、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的時候... */
}
?
七、最難處理的普通的img圖片們
?
展示性的圖片是最難處理的。
?
例如，一個餐廳圖片，CSS限制的像素寬度是480×320, 如果我們直接顯示480*320像素的圖片，則在高清設備下，圖片相當于2倍拉伸的效果 – 模糊！如果限制高清的960*640圖片，Oh, my gaga! 這增加的圖片尺寸大小估計有4倍之多，也就是說，普通iPad上，3/4的圖片流量是多余的，浪費的，關鍵顯示的效果還不如480*320像素的好！如何 權衡，如何博弈！？
?
理論上講，最佳的做法是，不同的屏幕設備顯示不同的大小圖片。具體做法如下：
?
-
準備幾套套圖片，大小高寬正好2倍或1.5倍差異（只是iPad開發的話，只要兩套），圖片的路徑要可以彰顯其比例大小。例如：
/1/a.jpg /1.5/a.jpg /2/a.jpg -
通過設備像素比devicePixelRatio來決定到底使用哪張圖片。例如，高清iPad下，
window.devicePixelRatio為2, 因此，我們的圖片HTML應該是：<img src="/2/a.jpg" />? -
可以通過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值發給后臺，其他的事情，就交給后臺他們去判斷、去輸出了！
?
我對靜態地圖研究不是很深，這里可能有處理不當的地方，歡迎同行指正，不甚感謝！
?
八、哦，莫非這是結語
?
本文的內容其實
不只受用于iPad的頁面制作
，還有手機。隨著視網膜桌面顯示器越發的普及（如2012款iMac采用了”視網膜”屏幕，以后，其他一些顯示器們也會跟風，做噱頭的~~），我們傳統web的頁面開發也將面對新的挑戰——不僅要處理不同的顯示屏分辨率，還要處理不同的設備像素比！
?
看來蘋果公司想顛覆的東西波及甚廣，爾等估計也不能幸免了。
?
發展很快，止步不前，容易淘汰；機遇與挑戰共存，加油吧，阿郎！
?
?
推薦閱讀： Towards A Retina Web
?
來自
張鑫旭-鑫空間-鑫生活
[
http://www.zhangxinxu.com
]
原文地址：
http://www.zhangxinxu.com/wordpress/?p=2732
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
