如何基于浏览器的

的高度加载图像，我有两个图像：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

如何基于浏览器的

回答

相关问题