「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
  自從Apple推出Retina的高解析螢幕後,讓手機與筆電,在瀏覽照片時,讓影像變得更細膩,因此也讓許多品牌紛紛的跟進,而這看似美意,但也苦了網頁設計師,由於螢幕的密度提高,這也讓圖片原本的圖片在Retina高解析的螢幕下,會出現鋸齒, 雖然說目前新的網頁格式SVG可解決,但這也只限於向量圖示。
  因此當網頁中的圖片,也要顯示高解析的影像時,就得準備二倍大影像尺寸,才能讓影像在Retina的高解析螢幕顯示清析的影像,由於目前影像尺寸是二倍大,但在顯示時需除以2,才能讓圖像1:1顯示,因此這時可用Retina.js這外掛來完成,透過Retina.js來偵測並自動切換高解析的影像,讓網頁圖片全面支援Retina的螢幕。
從下圖可看到,在Retina高解析的螢幕下,顯示影的尺寸為100像素,但在每一個像素中,則會再作分割,讓影像看起來更加的細緻。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
Retina.js
網站名稱:Retina graphics for your website
連結網址:http://imulus.github.io/retinajs/

進入Retina.js網站後,點一下Download鈕。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
下載解壓縮後,分別會看到以下的檔案,這時只需將retina.min.js放到專案中即可。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
這時圖片需準備二張,一張為原始尺寸大小,另一張要是二倍大的尺寸大小。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
接著先把retina.min.js引用到網頁中,接著再啟用它,當要使用時,只要在img標籤中,當要使用高解析的影像時,再data-rjs的自訂屬性中,加入二倍大的尺寸檔案。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
當螢幕為Retina就會自動切換成二倍大的影像尺寸。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
一般的螢幕,就會顯示原來1倍的影像,但無論一倍還是二倍,在顯示的大小是一樣大的。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
除了透過img標籤外,也可用CSS來作控制,但這時就得透過背景的形式來顯示。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
分別可看到,無論是透過img標籤,還是透過CSS皆可正常顯示,只不過透過CSS的方式,需指定區塊的大小,而Apple官網就是採用CSS的方式來進行控制的。
梅問題-「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像
[範例預覽] [範例下載]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQuery教學-RWD自適應導覽列多層級下拉選單

jQuery教學-RWD自適應導覽列多層級下拉選單





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。