THE NEST: Retina裝置與網頁開發

Retina螢幕有什麼不一樣？

近年來電子設備越發精密，螢幕自然也不例外。尤其在Apple發表了所謂的Retina螢幕之後，Retina這個字自然的就成為了這類螢幕的代名詞。但除了螢幕比較細緻，點距比較密集之外，Retina跟傳統螢幕有一點非常大的不同，而這也是身為前端工程師在編寫網頁時需要注意到的。

簡單來說 Retina所指的是Device Pixel Ratio大於1（通常1.2以上）的螢幕。那什麼又是Device Pixel Ratio?（以下用DPR代替）

devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on the device.
devicePixelRatio = physical pixels / dips

譯：

Device Pixel Ratio是實際裝置上的像素與系統（對於前端工程師，系統=瀏覽器）像素之間的比值
Device Pixel Ratio = 實際裝置像素 / 系統像素

也就是說，在Retina螢幕上所操作的每個像素，對應到的實際像素是超過一個的。為什麼？為什麼不是1:1？一個主要原因是因為當初Apple從非Retina升級至Retina時，希望既有的應用程式及網頁都還能在Retina上面正常顯示，於是儘管螢幕解析度從320x480變成了640x960，我們在兩個裝置上看到的物品大小都還是差不多。但實際上非retina每一像素個都對應到retina螢幕四個像素。

Apple的Retina比較簡單，目前的DPR都是固定在2也就是1個像素對應2x2=4個像素。到了其他非Apple的Retina裝置上，各種DPR從1.2到3的都有。值得一提的是，Apple並不是第一個造出Retina裝置的，第一名是Google Nexus。

為什麼要特別針對Retina螢幕作調整

前文已經提到了DPR這個東西，也就是說一個圖片如果是100x100，在非retina裝置上對應到實際裝置像素一樣是100x100，但在DPR=2的裝置上對應到的實際裝置像素就是200x200，這時如果還是拿100x100的圖片來放，那就會看到圖像很明顯的糊掉，且這樣Retina就沒有發揮的地方。幸好，經過這一兩年已經有一些方法可以處理Retina螢幕上的顯示，簡單地說，就是給Retina螢幕更清晰的圖片。

Media Query

基本語法：


/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

/* 2.0 dpr */
@media 
(-webkit-min-device-pixel-ratio: 2.0), 
(min-resolution: 192dpi){ 
    /* Retina-specific stuff here */
}

/* dpi = 96 * -webkit-min-device-pixel-ratio */

Media Query也是RWD裡面最常用的方式，利用CSS偵測系統的DPR之後，提供相對應的style。比如說我們可以針對DPR 1.5以上的螢幕設定高解析的背景，一般螢幕設定正常解析度的背景：

body {
  background: url("../img/fabric_of_squares_gray.png"); /*original resolution of 410x410*/
}

@media only screen and (-moz-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  body {
    background-image: url("../img/fabric_of_squares_gray_@2X.png"); /*resolution 820x820*/
    background-size: 410px 410px;
  }
}

這裡針對了不同DPR給予不同的背景圖片，其中retina裝置需要多加個長寬的設定，否則瀏覽器看到820x820的圖片一樣會顯示成820x820的大小，也就是佔用1640x1640的實際裝置像素。其中-webkit-min-device-pixel-ratio是給webkit browser看的，而其他browser都支援min-resolution，且注意min-resolution裡面使用的單位是dpi，有些地方使用dppx但IE並不支援，所以使用支援程度較為廣泛的dpi即可。計算方式很簡單，把DPR乘上96就是dpi欄位該填入的數字。

利用Media Query可以讓大部份藏在css裡面的圖片都提供良好的retina支援。不管是背景、icon、sprite都能用此方法來解決。

內容圖像

Media Query針對不同DPR給予不同style，但如果現在是一張首頁的圖像呢？要如何置換html img？

有人寫了一個js lib: retina.js，可以在檢測裝置為retina之後，重新向server要求一個@2x的圖片。假設今天我有一個圖黨：

<img src="/images/my_image.png" />

在retina裝置上，retina.js會重新跟server要求images/my_image@2x.png(檔名後面加上@2x，此命名規範來自Apple)，如果有的話則載入新檔。

此方式可以同時提供兩種裝置不同的圖片，但如果是retina裝置的話會需要抓取兩次圖檔，第一次原始圖檔第二次才是@2x的檔案。不但增加傳輸量，也會增加許多的http request，且不管有沒有@2x，每個img都會產生一個request，因此使用時要多注意是否真的需要。

提高解析度同時維持相同檔案大小的方式

如果我們想提供高解析度的圖片，多數人會認為圖檔就會變大，但如果圖片的精確度不是很重要的時候，我們可以利用jpg的壓縮品質來控制檔案大小（詳見此文）。簡單的說，當我們把壓縮品質設定在平常的一半的時候(ex: 80 vs 40)，所產生長寬各兩倍的圖像檔案大小會根原圖差不多。也就是100x100的jpg檔以80的壓縮品質，跟200x200的圖檔以40壓縮所產生出來的圖檔大小是差不多的。當然品質低意味著會損失一些細節，這邊就是頻寬及圖像品質的抉擇了。

直接使用高解析度圖片

當然，如果資源足夠，頻寬高系統好，那就直接一視同仁的給使用者最好的圖片吧，只要設定好長寬，非retina的裝置會自動的把圖檔縮小。

常用裝置DPR列表

DPR 1.0

All non-Retina Macs
All non-Retina iOS devices
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

DPR 1.3

Google Nexus 7

DPR 1.5

Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

DPR 2.0

iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
All Macs with Retina displays
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

DPR 3.0

HTC Butterfly

參考資料

http://bjango.com/articles/min-device-pixel-ratio/
http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web/

Retina裝置與網頁開發