特別聲明：此篇文章根據Stéphanie Walter 的英文文章《The Mobile Web: CSS Image Replacement for Retina Display Devices 》進行翻譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。

有很多設備的“devicePixelRatio”都大于1.5或者等于2（window.devicePixelRatio = 物理像素/dips）。我的三星項目就是個最新的iPhone和iPad版本設置了“devicePixeRatio”等于“2”。Retian似乎是屏幕顯示的一種趨勢，這也是Web設計師面對的一個新挑戰。

移動應用程序的設計師們已經學會了如何為Retina屏幕設備顯示更好質量的圖片，用來提高用戶的體驗。他們為普通顯屏和Retina屏幕提供兩套圖片，以及為Android設備創建了四套不同尺寸大小的圖片。

iPhone5和New iPad已經開始采用了Retina屏幕顯示技術。在本文中，你將看到如何使用CSS3技巧在Web應用中為Retina屏幕替換更高質量的圖片。

這一切都始于為iPhone創建一個jQuery Mobile的應用程序。當時的想法是想使用一個完整的“HTML5 jQuery Mobile”應用程序，并使用“Phonegap”將其嵌入到“Native Shell”中。

對于這個應用程序，我在在底部創建了一個標簽欄，在頂部放置了一個logo，以及模仿了一個ios的標簽欄。"header"和“footer”部分都采用了圖片替換文本的技術，在頂部顯示了logo圖標，在底部顯示了對應的工具標簽icon。

故事就這樣發生了，當我在iPhone 4s的設備上進行測試時，我看見頂部的logo和底部的icon圖標都被放大，并且看起來模糊，視覺效果非常的差。

為了更好說明問題，我在本機上創建了一個類似于iOS的應用程序，這樣你就能搞清楚是怎么一回事。不管你有沒有Retina設備，如果你要測試都可以用你的手機點擊,同進你也可以點擊下載源碼。(如果你想模仿做一個簡單的手機移動頁面，這也是一個例子喲)。

正如我所說的，如果你在一個非視網膜裝置上加載頁面，看起來是一個不錯的效果，但是你在一個Retina裝置上加載頁面，那么頁面上的圖片將會柵格化，看起來比較模糊。