2013-01-23 191 views
0

可能重複:
Showing retina display image with pure css視網膜顯示屏的圖像

我一直在做關於視網膜顯示媒體查詢就可以提供更高質量的圖像爲那些誰擁有視網膜顯示一些閱讀。 。我的問題是,我是否將相同的圖像兩次保存在我的資產中(例如,一種藥品質量和另一種高質量),然後根據設備是否視網膜準備一個或另一個。

或者我是否有一個圖像,然後使用媒體查詢以最高質量在視網膜設備上提供圖像。

我的第二個問題是如何將我告訴瀏覽器服務於最優質的所有圖像,如果用戶有

任何建議表示讚賞,並表示歉意視網膜功能的設備,如果這是一個基本的問題

+0

wouldnt將此類作爲重複,不回答我的任何問題 – Richlewis

+0

@Richlewis聽起來像是重複,但你沒有標記相同的問題。你爲什麼想用jQuery而不是CSS來做到這一點? – rds

回答

2

國際海事組織,你必須根據設備分辨率提供不同的圖像 - 主要原因是小型設備可能有較低的帶寬連接和較少的資源(考慮本地緩存)等 - 所以較低分辨率的圖像(較小的尺寸)將是更好的選擇。

無論您是創建靜態資產還是使用某些工具/處理程序來動態創建它們都是一個不同的問題。例如,Adaptive Images是基於PHP的解決方案,需要稍後的方法。

編輯
關於你的第二個問題,如果您使用的媒體查詢,然後瀏覽器會做出這樣的決定每一次 - IMO,不會有其他的,而不是說使用媒體查詢申請整個CSS文件中的任何解決方案意味着該設備。但我認爲這與績效觀點不會有任何顯着差異。

+0

謝謝,建設性的答案,只是我需要的確認...所以theres沒有毛毯方式說視網膜顯示質量適用於所有圖像 – Richlewis

1

您是否嘗試過在網絡上搜索某些解決方案?你有嘗試過什麼嗎?

例如,你有沒有試過Retina.js

所謂的「視網膜」顯示器的問題在於,設備瀏覽器對您的分辨率有所謊言,並且會對您網站上的每個圖像和每個其他尺寸進行縮放。如果這些只是高分辨率的顯示器而沒有說謊,那麼就不會有這樣的問題,standard responsive design techniquesresponsive IMGs tricks就可以工作。

遺憾的是,情況並非如此,現在你的設計必須處理:

  1. 寬度(什麼是屏幕的寬度)
  2. 設備寬度(什麼是真正的屏幕的寬度)
  3. 所述設備寬度乘以「視網膜」縮放因子(什麼是真的屏幕的寬度)
+0

Retina JS看起來像非常好 – Richlewis