如何基於瀏覽器的

的高度加載圖像，我有兩個圖像：A.png和B.png如何基於瀏覽器的

我想基於設備的分辨率來加載圖像

我的意思是，如果頁面被裝上桌面A.png必須加載或者在iPhone上加載B.png必須加載。

的Javascript：

var heights = $(window).height(); 
if (heights < 500) { 
    // load B.png 
} 
else { 
    // load A.png 
}

任何意見或建議，使這一切成爲可能？

我正在使用codeigniter。

非常感謝。

UPDATE 下面是我用

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{ 
img.bannerimage{background:url(<?=base_url();?>mbanner/<?=$mbanner?>);} 
} 
@media only screen and (min-width : 1224px) 

{ 
img.bannerimage{background : url(<?=base_url();?>uploads/<?=$bannerimage?>);} 
}

的邏輯，但沒有成功（我不擅長的CSS），

來源

2013-04-26 Ramaraju.d

你的問題看起來像是自己回答。你只是不知道如何通過js獲取和提供圖片？如果是這樣，請查看$ .ajax ...並且我猜想成功方法中的任何DOM操作或css更新。 – 2013-04-26 17:30:45

出於好奇 - 雖然你不只是使用CSS媒體查詢？ – 2013-04-26 17:31:29

您是否對瀏覽器窗口的大小更感興趣，或者設備是PC還是iPhone？ – 2013-04-26 17:31:45

如果您正在使用jQuery，你可以找到寬/高桌面/移動瀏覽器'：

var height = window.innerHeight || $(window).height(); 
var width = window.innerWidth || $(window).width(); 
var img = new Image(); 
if (height > 500) { 
    img.src = '/a.png'; 
} else { 
    img.src = '/b.png' 
} 
$('body').append(img);

來源

2013-04-26 18:01:09 Ikrom

如何基於瀏覽器的

回答

相關問題