在iPhone 4上為視網膜顯示屏優化網頁圖片
說起iPhone 4帶來的革新，retina display絕對是最吸引眼球的一項，以至于我現在看電腦的顯示屏時，都能看到滿屏幕的像素點了⋯
正是依賴這視網膜顯示屏，iPhone 4的分辨率達到了640×960 pixels;不過為了保持向下兼容性，它采用的仍然是320×480 points。
也就是說，在不進行縮放的情況下，顯示普通圖片時，它會用4個像素來顯示圖片中的1個像素;而在顯示retina圖片時，每個像素都對應圖片中的1個像素。
如此一來，老的應用無需修改就可以在iPhone 4上運行了——雖然顯示效果差了點，但是不會出現只有左上角那1/4的區域有內容的情況。
在用iOS SDK開發iOS應用時，只要將圖片名加上“@2x”后綴，就能讓支持retina display的設備自動顯示這個解析度更高的圖片。
但Safari等使用UIWebView的應用在展示圖片時，卻無法利用這個特性，因為這樣可能會造成大量沒必要的HTTP請求。
既然不能自動實現，那就只能手動來弄了。原理很簡單，準備2種圖片，當檢測到支持retina display時，就顯示大圖，然后把圖像的長寬各縮小一半即可。
在網頁中，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執行之前，就已經在獲取低解析度的圖片了。
最終的效果如下：
雖然在電腦上完全看不出有什么區別，但用iPhone 4在手機頁面瀏覽或放大時可以很容易看出2者的差異。
