讓手機版 Logo 支援 Retina，在手機上看就不會模糊不清

最近因為手機版改版製作的關係，也多注意了不少地方，像前陣子加入的 YouTube 自適應， 再來就是很多人不太注意的 Logo，如果你有仔細看的話，會發現在手機版上的 Logo 很多網站看起來都是有一點糊糊的，那是因為圖片本身在高解析度的螢幕下觀看會有差異，因此阿湯上網搜尋了一下方式，要讓圖片支援 Retina 可以改用 SVG 檔案，不過這不是一個最佳方式，另外就是可以透過 javascript + css 來達成，往下阿湯就來分享這次的做法給大家參考。

如何讓手機版圖片支援 Retina？

以一般文章圖片來說較不會感受到太大差異，不過像是網站的 Logo 真的是會差很大，阿湯分別截下了有 Retina 跟沒有的圖片來讓大家比照，立馬就見真章，很明顯的下面那個 Logo 糊了許多，也可能是阿湯太龜毛，有些人可能覺得手機版隨意就好，好吧，會在意的人再往下來看怎麼弄吧....

阿湯就不細說詳細的步驟，基本上有一點基礎（真的只要一點）的人就會看懂怎麼套用，這次採用的是一個 js 的外掛再加上 CSS 的搭配。

Retina.js 下載：請至這裡進入網站點擊 Download 下載。

解壓縮後會有 retina.js 及 retina.min.js，二個檔案你要加載哪一個都可以，min 的檔案當然就比較小，自己選擇加載囉。

<script type="text/javascript" src="retina.min.js"></script>

加載後就是使用的方式，可以用在 img src 的圖片語法，也可以使用 CSS，如果是使用圖片語法，原本會長的像這樣。

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

請另外準備一張二倍解析度的圖片命名為 logo@2x.png，然後將語法修改為，原本的 logo.png 也請保留著，這麼一來就會判斷，如果支援 Retina 就會自動切換。

<img src="/images/logo@2x.png" />

如果是 CSS 的用法，原理和上面差不多，例如原本的 CSS 定義如下：

#logo { background-image: url('/images/logo.png'); }

你只要保留原本的 CSS 再加上新的部份像下方所示，就可以了。

#logo { background-image: url('/images/logo.png'); }

@media all and (-webkit-min-device-pixel-ratio: 1.5) {

#logo {

background-image: url('/images/logo@2x.png');

background-size: 200px 100px;

}}

這麼一來在手機上查看也都會是清清楚楚囉，你也可以用手機看看教不落的網站就會看到清晰的 Logo。