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。

，而不是通过检查窗口宽度来执行此操作

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


}

你可以这样做。

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

1 个答案: