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

How to load an image based on height of the browser

本文关键字：高度 加载 图像 浏览器 何根      更新时间：2023-09-26

我有两个图像: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)，

如果你正在使用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);
相关文章：