Javascript 将手机中的body background image设置为div background

在桌面版本中，我有一个使用Javascript的全身背景旋转木马。它在桌面上运行良好。但当通过移动设备访问时，我需要将此旋转木马显示为

div

元素的背景，我有以下脚本：

var slides = [
    'image-url-path-1',
    'image-url-path-2',
    'image-url-path-3',
    'image-url-path-4',
];

const img = new Image();

img.onload = function() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        $('body').css("background-image", 'none');
        $('.campaign-left').css("background-image", "url('" + img.src + "')");
    } else {
        $('body').css("background-image", "url('" + img.src + "')");
        $('.campaign-left').css("background-image", 'none');
    }
}

img.src = slides[slides.length - 1];

---

这里的问题是，背景图像在

div

元素中没有正确显示。我的意思是它没有显示完整的背景图像。只能看到图像的一部分。如果我使用身体背景，手机屏幕上会显示完整的图像。有没有更好的方法来执行此操作并解决图像问题？

您可以使用CSS媒体查询来检测屏幕的宽度，这是检测设备是否移动的更好方法，而不是用户代理解析

比如说

@media screen and (max-width: 600px) {
  body {
    background-image: url(...);
  }
}

或者，如果要从JS中检测，请参见：

---

如果您需要为body和div设置不同屏幕大小的背景，则只需使用CSS即可

将要在mobile中为其设置背景的类添加到div中，使用CSS媒体代码将背景添加到该div和主体中

@media screen and (max-width: 768px) {
 .examplediv {
  Background-image:url('');
 }
}

@media screen and (min-width: 768px) {
 body{
  Background-image:url('');
 }
}

---

实际上，它正在正确地检测移动屏幕。但问题是它没有显示完整的背景图像。然后使用

background size

CSS属性