Question

我有两张图片：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。

非常感谢。

更新这是我使用的逻辑

@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），

Answer 1

如果您使用的是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);

如何根据浏览器的高度加载图像

1 个答案: