採取什麼方法確保移動網頁圖像在所有移動設備上都能正確呈現？

使用CSS和兩個不同的圖像實例，我能夠實現我想要在兩個不同的移動設備上看到的結果。對於使用320的屏幕寬度的設備，我將圖像實現爲image1.png。對於最新的設備，例如iPhone4（視網膜顯示器），我將圖像實現爲[email protected]。這需要normal.css樣式表，以及一個hirez.css樣式表是通過使用採取什麼方法確保移動網頁圖像在所有移動設備上都能正確呈現？

<link href="theme/hirez.css" rel="stylesheet" type="text/css" 
    media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" />

但是調用，這些新的了AMOLED /超級AMOLED的手機都很差渲染這些圖像的2倍;它使所有2倍圖像顯示像素化。

我想弄清楚我在做什麼錯...我有2套圖像爲每個文件名，並調用正確的CSS表...任何幫助將不勝感激。

來源

2011-04-01 Mike

您應該簡單地使用高分辨率圖像，並在頁面上以高度和寬度的50％顯示它。

來源

2011-04-01 16:02:21 cmplieger

在hirez.css中，我有@ 2x.png圖像，其背景大小爲50％，相對圖像顯示...例如normal.css寬度爲50px，高度爲50px，hirez.css將有相同的，但告訴@ 2x.png圖像留在50px和50px的背景大小...我猜這些超級amoled顯示器只是不能抓住進入網站hirez.css。 – Mike 2011-04-01 16:07:22

這是可能的，也許這些設備上的像素比率不是1.5。你可以試試1.1或者什麼？你永遠不會知道：） – cmplieger 2011-04-01 17:07:46

採取什麼方法確保移動網頁圖像在所有移動設備上都能正確呈現？

回答

相關問題