Comment charger une image basée sur la taille du navigateur

Question

J'ai deux images: A.png et B.png

Je suis en train de charger les images en fonction de la résolution de l'appareil

Je veux dire si la page est chargée sur bureau A.png doit être chargé ou s'il est en cours de chargement sur iPhone B.png doit être chargé.

Javascript:

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

Toutes les idées ou suggestions pour rendre cela possible?

J'utilise codeigniter.

merci beaucoup.

MISE À JOUR Voici la logique i utilisé

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

Mais sans succès (je ne suis pas bon à css),

Answer 1

Si vous utilisez jQuery, vous pouvez trouver la largeur/hauteur de bureau/navigateurs mobiles:

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