蘋果定義高分屏（retina）已經好久了，只是最近纔有越來越多的網站開始重視高分屏下的表現，QQ空間也早支持高分屏了，CSS Gaga也加入了對@2x圖片的支持。嗯，遲到的文章，和大家簡單的分享下。
首先，關於高分屏的基礎知識，可以查看之前的文章《移動端webapp開發必備知識》
一般來說，內容類的資源並不需要對高分屏做什麼優化，需要優化的是固定的圖片類資源。而且通常現在有三種做法：
自定義字體，將扁平化的圖標做成字體，可以原生的支持高分屏，因爲字體是矢量的。比如前端界用的icon-font，所以在iPhone和rMBP上看起來圖標都不會模糊；缺點是有些手機端瀏覽器不支持，比如“用戶量最大的UC瀏覽器”
矢量圖片，嗯，將圖標做成SVG格式，也能很完美的兼容到主流手機系統，當然Android 2.3以下版本支持很不好。
2倍圖片，嗯，兼容性最好的方案，本文主要說這種方法。
使用媒體查詢
這是最簡單的方法：
1 2 3 | @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {/* style rules */} |
兼容所有瀏覽器的話(當然不考慮IE9以下瀏覽器了)，還需要加上各瀏覽器的前綴：
1 2 3 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) {/* Style Rules */} |
JS判斷
我們可以通過window.devicePixelRatio方法來獲取當前屏幕的像素比然後給body或者html標籤添加差異化的class，再在樣式中針對高分屏用2x的圖片就好了：
1 2 3 4 | var dpr = window.devicePixelRatio;if(dpr >=1.5){ $('html').addClass("is-ratina");} |
不過既然媒體查詢可以做到的事情，就不要用js去reflow頁面了。
當然，如果配合CSSgaga的 AutoRetina功能，工作量會減少很多。