javascript - 将 body 背景图像设置为手机中的div背景

Question

在桌面版中，我有一个使用 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 元素中。我的意思是它没有显示完整的背景图像。只能看到图像的一部分。如果我使用正文背景，则完整图像会显示在移动屏幕上。有没有更好的方法来解决图像问题？

Answer 1

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

例如

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

或者如果你想从 JS 中检测它，请参见: https://www.w3schools.com/howto/howto_js_media_queries.asp