根據屏幕尺寸加載各種視網膜圖形集

Question

我的設置是我有幾個版本的網站。在較大的屏幕上有一個幻燈片放映，在手機和其他較小的屏幕上只有一個捲動站點。這兩個版本的網站加載不同的圖形。

我一直在困惑如何有條件地加載視網膜圖形。我需要爲視網膜設備加載第一組視網膜設備，這些設備的屏幕尺寸足以用於幻燈片播放，但如果您使用的是手機，則不應加載第一組視頻，而第二組視網膜圖形應覆蓋第二組圖像用於滾動網站。

我用這個來觸發，並與視網膜取代正常的圖形：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

這是我的媒體查詢的開始並替換爲圖像與桌面版網站。然後，我有幾節專門調整佈局：

@media all and (min-width: 1024px) and (max-width: 1099px){ 

@media all and (min-width: 768px) and (max-width: 1023px) { 

@media all and (max-width: 767px) { 
// This query is for the small phone sized layout. 

@media all and (max-width: 767px) and ((-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)) { 

這最後的查詢是我嘗試換視網膜圖像只針對手機網站。這不起作用，沒有我試過的安排工作。

想法？

謝謝

Answer 1

我建議使用一個jQuery插件這個e.G. retina.js或response.js，如果你想提供基於屏幕分辨率的不同圖像。

這樣，您只需在文件擴展名之前以標準分辨率上傳圖像並使用@ 2x上傳視頻顯示。 （retina.js，response.js功能更強大，但需要更多的工作在你身邊）

此外，我認爲你需要解決iphone 4與不同的媒體查詢。

-webkit-min-device-pixel-ratio：1,5應該可以做到。