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

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


}

你可以做这样的事情。