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

您必须以某种方式检测视口(viewport)大小并根据该大小调用回溯。

您可以使用 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});


}

你可以这样做。