說起iPhone 4帶來的革新，retina display絕對是最吸引眼球的一項，以至于我現(xiàn)在看電腦的顯示屏時，都能看到滿屏幕的像素點了⋯

正是依賴這視網(wǎng)膜顯示屏，iPhone 4的分辨率達到了640×960 pixels;不過為了保持向下兼容性，它采用的仍然是320×480 points。

也就是說，在不進行縮放的情況下，顯示普通圖片時，它會用4個像素來顯示圖片中的1個像素;而在顯示retina圖片時，每個像素都對應圖片中的1個像素。

如此一來，老的應用無需修改就可以在iPhone 4上運行了——雖然顯示效果差了點，但是不會出現(xiàn)只有左上角那1/4的區(qū)域有內容的情況。

在用iOS SDK開發(fā)iOS應用時，只要將圖片名加上“@2x”后綴，就能讓支持retina display的設備自動顯示這個解析度更高的圖片。

但Safari等使用UIWebView的應用在展示圖片時，卻無法利用這個特性，因為這樣可能會造成大量沒必要的HTTP請求。

既然不能自動實現(xiàn)，那就只能手動來弄了。原理很簡單，準備2種圖片，當檢測到支持retina display時，就顯示大圖，然后把圖像的長寬各縮小一半即可。

在網(wǎng)頁中，pixel與point比值稱為device-pixel-ratio，普通設備都是1，iPhone 4是2，有些Android機型是1.5。

要檢測它，直接用CSS3 media query即可：

<link rel="stylesheet" type="text/css" 
href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"/> 

或者：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {} 

這種方式的缺點是圖片必須設為背景圖片，或者同時列出2個img元素，但隱藏其中一個。詳細的代碼我就不列出來了.

更靈活的方法當然就是用JavaScript了。只要簡單地獲取window.devicePixelRatio即可，對老的瀏覽器而言它是undefined，將其當成1就行了。

以這個地球儀來舉例：

<img src="https://s8.51cto.com/oss/202207/20/a83fd0833ad646c8d1d51276980f0df68a8e80.png" id="photo"/> 

它的長寬都是64像素，所以我應該獲取一個128像素的，然后縮小一半：

if (window.devicePixelRatio == 2) { 
    var photo = document.getElementById('photo'); 
    photo.src = 'https://s4.51cto.com/oss/202207/20/b374538198f98e05c6c6234dafe26eee066eaf.png'; 
    photophoto.width = photo.height = 64; // 這個圖片沒有指定寬高，因此其實修改其中一個就行了 
} 

這種方法的缺點就是可能會浪費流量，因為在JavaScript執(zhí)行之前，就已經(jīng)在獲取低解析度的圖片了。

最終的效果如下：

雖然在電腦上完全看不出有什么區(qū)別，但用iPhone 4在手機頁面瀏覽或放大時可以很容易看出2者的差異。