为移动设备提供一组不同的图像

Question

我正在使用 jQuery-backstretch 在我的页面上提供褪色背景图片。这适用于桌面，但由于这些图像非常详细，我需要为移动用户使用另一组图像。

到目前为止，我发现了如何为移动设备禁用脚本（或为各个页面使用不同的图像：Using Backstretch for different images for individual pages），但我很想知道如何提供一组完全不同的图像移动设备。

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

有人有解决办法吗？非常感谢。

Answer 1

您必须以某种方式检测视口大小并根据该大小调用后退。

您可以使用 matchMedia.

而不是通过检查 window 宽度来做到这一点

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


}

你可以这样做。