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

Answer 2

如果有背景需要为正文和不同屏幕尺寸的div设置，则可以使用CSS进行设置。

向要在移动设备中为其设置背景的div中添加一个类，使用CSS媒体代码作为波纹管将背景添加到该div和正文中

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

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

将身体背景图片设置为手机中的div背景

2 个答案: