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

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

移動(dòng)應(yīng)用程序的設(shè)計(jì)師們已經(jīng)學(xué)會(huì)了如何為Retina屏幕設(shè)備顯示更好質(zhì)量的圖片，用來(lái)提高用戶(hù)的體驗(yàn)。他們?yōu)槠胀@屏和Retina屏幕提供兩套圖片，以及為Android設(shè)備創(chuàng)建了四套不同尺寸大小的圖片。

iPhone5和New iPad已經(jīng)開(kāi)始采用了Retina屏幕顯示技術(shù)。在本文中，你將看到如何使用CSS3技巧在Web應(yīng)用中為Retina屏幕替換更高質(zhì)量的圖片。

這一切都始于為iPhone創(chuàng)建一個(gè)jQuery Mobile的應(yīng)用程序。當(dāng)時(shí)的想法是想使用一個(gè)完整的“HTML5 jQuery Mobile”應(yīng)用程序，并使用“Phonegap”將其嵌入到“Native Shell”中。

對(duì)于這個(gè)應(yīng)用程序，我在在底部創(chuàng)建了一個(gè)標(biāo)簽欄，在頂部放置了一個(gè)logo，以及模仿了一個(gè)ios的標(biāo)簽欄。"header"和“footer”部分都采用了圖片替換文本的技術(shù)，在頂部顯示了logo圖標(biāo)，在底部顯示了對(duì)應(yīng)的工具標(biāo)簽icon。

故事就這樣發(fā)生了，當(dāng)我在iPhone 4s的設(shè)備上進(jìn)行測(cè)試時(shí)，我看見(jiàn)頂部的logo和底部的icon圖標(biāo)都被放大，并且看起來(lái)模糊，視覺(jué)效果非常的差。

為了更好說(shuō)明問(wèn)題，我在本機(jī)上創(chuàng)建了一個(gè)類(lèi)似于iOS的應(yīng)用程序，這樣你就能搞清楚是怎么一回事。不管你有沒(méi)有Retina設(shè)備，如果你要測(cè)試都可以用你的手機(jī)點(diǎn)擊,同進(jìn)你也可以點(diǎn)擊下載源碼。(如果你想模仿做一個(gè)簡(jiǎn)單的手機(jī)移動(dòng)頁(yè)面，這也是一個(gè)例子喲)。

正如我所說(shuō)的，如果你在一個(gè)非視網(wǎng)膜裝置上加載頁(yè)面，看起來(lái)是一個(gè)不錯(cuò)的效果，但是你在一個(gè)Retina裝置上加載頁(yè)面，那么頁(yè)面上的圖片將會(huì)柵格化，看起來(lái)比較模糊。

由于像素比例（devicePixeRatio）是2，這個(gè)時(shí)候圖片也將放大兩倍，此時(shí)就造成了圖片在設(shè)置中顯示時(shí)被拉伸，呈現(xiàn)出來(lái)的時(shí)候就模糊不清。下面從iPad3中，iPhone4和”三星“設(shè)備中截取的一些被柵格化的圖像截圖。

三星（Galaxy Nexus）下的效果

iPhone4下的效果

iPad 3下的效果

在這個(gè)案例中，為Retina替換圖片，采用不同的技巧將會(huì)有不同的效果。

我們需要替換的第一張圖片是頂部的logo。在此處確保只設(shè)置高度不設(shè)置寬度。

HTML 結(jié)構(gòu)

發(fā)表評(píng)論 共有條評(píng)論 用戶(hù)名: 密碼: 驗(yàn)證碼: 匿名發(fā)表