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

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
}

有什么想法或建议可以使这成为可能吗？

我正在使用代码点火器。

非常感谢。

更新 这是我使用的逻辑

@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);