2013年11月20日 星期三

支援 Retina 的網頁

WWW Retina Support

換了 MacBook Pro with Retina Display 已有一段時間,由於 99.99% 的網頁都沒有 Retina 化,所以在瀏覽時圖片明顯覺得朦朧。最近在製作新網頁,想同時加入 Retina 支持。

起初以為像 iOS 開發一樣,加入 @2x 圖片就行;可是這個方法是行不通。看完 Apple 的「Serving Images Efficiently to Displays of Varying Pixel Density」後,似乎最適合我的是 Javascript 方法。在網上找到了 retinas.com 提供了一個簡單方便的辦法;不過,在 Retina 裝置上會造成載入兩次的情況(首先載入標清版,之後才載入高清版),加重了服務器的負擔,還是動手寫一個優化版。
function prepareRetinaImages()  {

  //  Find out all <img> object and replace the source name to @2x
  var imgArray = document.getElementsByTagName("img");
  for (var i=0; i<imgArray.length; i++)  {

    var imgObject = imgArray[i];
    var retina = imgObject.getAttribute("retina");
    if (retina == null)  {continue;}

    if (window.devicePixelRatio < 2)  {

      //  Remove @2x if not a retina device
      imgObject.src = retina.replace("@2x", "");
    }  else  {

      imgObject.onload = function()  {
        //  TODO: Not sure why apply /2 to height will cause problem
        this.width = this.width/2;
      };
      imgObject.src = retina;
    }
  }
}
我寫的其實好不了多少,但勝在切合我的需要。

2 則留言:

c.quet 提到...

那個 img tag 裡應該沒有 width 和 height 的 attribute 吧, 如果用在有 width 和 height 的 img 就會變形了。
解法是先在 onload function 定義好 img 的 width 和 height:

imgObject.onload = function() {
this.width = this.width;
this.height = this.height;
this.width = this.width / 2;
this.height = this.height / 2;
};

這樣 resize 的 logic 就不會怪怪的。

Pacess HO 提到...

c.quet,謝謝指教~