【轉】Retina 螢幕下，網頁圖片的顯示相容

標籤：android   style   http   io   ar   os   使用   sp   for   

感謝 Apple，帶來了 Retina 螢幕的革命，讓我們可以在電子顯示屏上享受到印刷級的解析度。由於解析度的提升，網頁中的文字、Flash 和 SVG 內容顯示得比原來更加精細，但網頁中的圖片卻變得異常模糊，存在非常嚴重的解析度相容問題。自從 2010年6月，iPhone4 的上市開始，網頁圖片的顯示相容問題就已出現，經過幾年的發展，配備 Retina 螢幕的電子產品越來越多，如今 Apple 又將 Retina 技術應用到了 Macbook Pro 上，網頁圖片在 Retina 螢幕下的顯示相容已經變得迫在眉睫。

這裡分享幾種相容方法，供大家參考。

1. <img> 標籤引用的圖片

我們以一張 300*200px 的照片為例：

1	<img src="./photo.jpg" style="width:300px;height:200px;" />

如果想讓這張圖片在 Retina 螢幕下達到應有的顯示解析度，只需使用該照片的源檔案匯出一張清晰的 600*400px 的圖片，我們將其命名為 [email protected]，替換現有的圖片即可：

1	<img src="./[email protected]" style="width:300px;height:200px;" />

換成 @2X 圖片，在 Retina 螢幕下的顯示就清晰多了，可謂細節畢現。不過在普通螢幕下，圖片的顯示需要經過瀏覽器的壓縮，一些老版本瀏覽器如 IE6、7 會顯示得非常失真，同時大尺寸的圖片會佔用更多的頻寬，增加頁面載入的時間，降低使用者體驗。通過 JS 的輔助，可以讓圖片在普通螢幕和 Retina 螢幕下做到自動適配：

1234567891011121314

<img class="photo" src="./photo.jpg" style="width:300px;height:200px;" /> <script type="text/javascript">$(document).ready(function () {if (window.devicePixelRatio > 1) {var images = $("img.photo");images.each(function(i) {var x1 = $(this).attr(‘src‘);var x2 = x1.replace(/(.*)(\.\w+)/, "[email protected]$2");$(this).attr(‘src‘, x2);});}});</script>

Retina.js 提供了更加完善的解決方案，自動匹配螢幕解析度的同時，還可以檢測伺服器上是否存有當前圖片的 @2X 版本，以決定是否替換。

優點：

1. 操作簡單
2. 普通螢幕下不會載入 @2X 的大尺寸圖片，節約頻寬

缺點：

1. Retina 螢幕下，標準圖片和 @2X 圖片都會被載入
2. 圖片在顯示過程中會被重繪
3. 有些老版本瀏覽器下存在相容問題

2. CSS 背景圖片2.1 Meta Queries + background-size

我們以一張 logo 的背景圖為例，首先我們定義 logo 的尺寸為 100*40px，然後為 #logo 設定一個 100*40px 的背景圖片 logo.png，

12345

#logo {width: 100px;height: 40px;background: url(./logo.png) 0 0 no-repeat;}

接下來通過 Meta Queries 判斷裝置的最小顯示像素比，如果大於等於1.5的話，為 #logo 設定一張 200*80px 的背景圖片 [email protected]，然後通過設定 background-size 讓背景圖顯示為 logo 該有的尺寸。這裡的顯示像素比我們選擇 1.5 作為閾值，是為相容除蘋果以外的高解析度裝置，比如三星的 Android Pad。

123456789

@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) {#logo {background-image: url(./[email protected]);background-size: 100px auto;}}

這樣，對於普通的顯示裝置或是不支援 Meta Queries 的瀏覽器，會顯示標準的背景圖，對於支援 Meta Queries 的 Retina 裝置，會顯示 @2X 的背景圖。（ IE6、7、8 均不支援 Meta Queries 和 background-size ）

如果僅是為了相容當前的蘋果 Retina 顯示屏，也可以直接判斷裝置的顯示像素比是否等於2：

123456

@media only screen and (-webkit-device-pixel-ratio: 2), only screen and (-moz-device-pixel-ratio: 2), only screen and (-o-device-pixel-ratio: 2/1), only screen and (device-pixel-ratio: 2) {...}

優點：

1. 只會載入匹配當前裝置的最適圖片
2. 跨瀏覽器安全色

缺點：

1. 如果背景圖片很多的話，需要編寫非常冗長的代碼

2.2 image-set

我們同樣以之前的 logo 為例，實現方式如下：

1234	#logo {background: url(./logo.png) 0 0 no-repeat;background-image: -webkit-image-set(url(./logo.png) 1x, url(./[email protected]) 2x);}

優點：

1. 讓圖片的連結地址在 CSS 中更加集中，代碼的維護成本降低
2. 可以讓瀏覽器擷取多種尺寸的圖片檔案，根據螢幕解析度或是其他一些因素選擇適當的圖片進行展示，在圖片的匹配上可以做到更加智能

缺點：

1. image-set 現在只是 CSS4 的一個草案，目前只有 Webkit 核心的 Safari 6+ 和 Chrome 21+ 支援該屬性

最後的這條缺點很致命，期待 W3C 早日將 image-set 寫入標準之中，讓更多的瀏覽器支援這種寫法。

3. 使用 SVG 可縮放向量圖形

與只能記錄影素資訊的位元影像相比，向量圖在不同解析度下的相容有著先天的優勢，目前大多數現代瀏覽器都已經支援基於 XML 的 SVG 格式圖形的顯示，網頁中一些線條簡單的 Logo 、表徵圖或特殊字形，如果轉成向量的 SVG 格式來顯示，在 Retina 下的相容也就搞定了。

製作 SVG 格式圖片，可以使用 Adobe Illustrator 或免費的替代軟體 inkscape 。

使用 SVG 格式圖片，可以像我們使用其他格式的圖片一樣，用 HTML 的 <img> 標籤引用，或用 CSS 的 background-image 、 content:url() 屬性，需要注意的是，無論用哪種形式，最好定義一片的尺寸。

1	<img src="example.svg" width="300" height="200" />

12345678910111213

/* Using background-image */.image {background-image: url(example.svg);background-size: 300px 200px;width: 300px;height: 200px;} /* Using content:url() */.image-container:before {content: url(example.svg);/* width and height do not work with content:url() */}

如果需要相容 IE6、7、8 或是其他一些不支援 SVG 的瀏覽器，需要額外用到 PNG 格式的圖片副本（關於 PNG 格式 Alpha 通道的相容問題這裡不做討論）。

3.1 <img> 標籤引用 SVG 格式圖片

在 HTML 的 <img> 標籤中，增加一個 PNG 格式圖片的自訂屬性

1	<img src="example.svg" data-png-fallback="example.png" />

然後引入 jQuery 和 Modernizr 判斷當前瀏覽器是否支援 SVG ，不支援的話使用 PNG 替換 SVG 。

12345678

$(document).ready(function(){if(!Modernizr.svg) {var images = $(‘img[data-png-fallback]‘);images.each(function(i) {$(this).attr(‘src‘, $(this).data(‘png-fallback‘));});}});

3.2 CSS 背景引用 SVG 格式圖片

引入 Modernizr ，將 CSS 改寫成以下形式即可：

12345678910

.image {background-image: url(example.png);background-size: 30p0x 200px;} .svg {.image {background-image: url(example.svg);}}

為了獲得最佳的跨瀏覽器安全色效果，避免在 Firefox 和 Opera 下出現光柵問題，製作的 SVG 圖片最小要達到父容器的尺寸。

優點：

1. 可相容所有裝置的解析度
2. 維護成本較低
3. 向量圖可以無限伸縮，更加面向未來

缺點：

1. 不適合複雜的圖形，複雜的向量圖形可能會導致檔案過大
2. 不同的消除鋸齒演算法，可能會帶來不同的瀏覽感受
3. IE6、7、8，早期的 Android 瀏覽器，及其他一些較老的瀏覽器無法提供對 SVG 的原生支援，使用 <img> 標籤的方式可能會導致瀏覽器下載 SVG 檔案

4. Favicon

Favicon 的 Retina 相容比較容易，或許你的現在 Favicon 在 Retina 下就已經顯示得非常清晰，如果不是這樣，使用 ico 編輯工具，建立一個包含 16*16 和 32*32 兩種內建映像的 ico 檔案，替換現有的 Favicon 即可，瀏覽器會根據解析度的大小自動匹配內建映像的尺寸。

至於 ico 編輯工具，Windows 下推薦使用 IconXP ，Mac 下推薦 Apple’s Icon Composer（Graphic Tools in Xcode中）。

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

參考：

• Towards A Retina Web

【轉】Retina 螢幕下，網頁圖片的顯示相容