Servir un ensemble différent d'images pour mobile

Question

J'utilise jQuery-backstretch pour servir des images d'arrière-plan qui s'estompent sur ma page. Cela fonctionne bien pour le bureau, mais en raison de la précision de ces images, je dois utiliser un autre jeu d'images uniquement pour les utilisateurs mobiles. Jusqu'à présent, j'ai découvert comment désactiver le script pour mobile (ou utiliser des images différentes pour les pages individuelles: Using Backstretch for different images for individual pages), mais j'aimerais savoir comment servir un ensemble d'images totalement différent juste pour mobile.

<script> 
function detectmob() { 
    if(window.innerWidth <= 800 && window.innerHeight <= 600) { 
    return true; 
    } else { 
    return false; 
    } 
} 

if(!detectmob()){ 

    $.backstretch(["imgs/1.jpg" 
, "imgs/2.jpg" 
, "imgs/3.jpg" 
, "imgs/4.jpg" 
], {duration: 1800, fade: 4000}); 
} 
</script> 

Est-ce que quelqu'un a une solution? Merci beaucoup.

Answer 1

Vous devez d'une manière ou d'une autre détecter la taille de la fenêtre et appeler la fonction de rétraction en fonction de cela.

Au lieu de faire cela en vérifiant la largeur de la fenêtre, vous pouvez utiliser matchMedia.

if (window.matchMedia("(min-width: 992px)").matches) { 
// phone 
$.backstretch(["imgs/1_phone.jpg" 
, "imgs/2_phone.jpg" 
, "imgs/3_phone.jpg" 
, "imgs/4_phone.jpg" 
], {duration: 1800, fade: 4000}); 

} else { 

//tab or desktop 
$.backstretch(["imgs/1.jpg" 
, "imgs/2.jpg" 
, "imgs/3.jpg" 
, "imgs/4.jpg" 
], {duration: 1800, fade: 4000}); 


} 

Vous pourriez faire quelque chose comme ceci.