在移动设备和桌面设备上加载不同的元素或背景图像答案

【问题标题】：Load different element or background image on mobile vs desktop在移动设备和桌面设备上加载不同的元素或背景图像
【发布时间】：2021-04-25 22:24:48
【问题描述】：

我正在开发一个网站（使用使用 Antlers、Bootstrap、SCSS 的 Statamic v3），该网站涉及移动和桌面背景的不同上传（内联样式）。做这个的最好方式是什么？我在这些问题上挣扎了很长时间。当然，我可以使用 display none 和 display block 与媒体查询，但我希望有一个解决方案，只有移动图像加载到移动/小屏幕尺寸上，只有桌面图像加载到桌面/大屏幕尺寸上，所以它更好用于页面加载。

对于 img 标签，可以使用 img srcset，但不能使用背景图像。我也在质疑自己如何用大量代码（所以不一定使用背景图像）来使用部分/元素来做到这一点

我还尝试通过 JavaScript 使用移动检测，但问题是如果用户在桌面上工作但浏览器视图较小，则无法获取网站的“移动版本”。

我主要是使用 Bootstraps d-none 和 d-block 来处理媒体查询，但这感觉不对。

任何人都有保持良好页面加载的最佳实践吗？

编辑：我添加了一些代码来显示我想要实现的目标。用户可以在 CMS 上上传桌面背景图像和移动背景图像。据我所知，这两个图像都将加载到页面中，但由于显示属性，它们不会同时显示。我的目标是页面不会加载两个图像，而只会加载该视口大小所需的图像。我不能在我的 SCSS 中使用媒体查询执行此操作，因为我无法在我的 SCSS 中设置背景 url。

<div class="row d-md-none main-content" style="background-image: url('{{ bg_image_desktop }}')">
  <div class="offset-md-2 col-md-8">
    <h1></h1>
  </div>
</div>

<div class="row d-none d-md-block main-content" style="background-image: url('{{ bg_image_mobile }}')">
  <div class="col-12">
    <h1></h1>
  </div>
</div>

【问题讨论】：

"浏览器小视图，看不到'手机版'" 为什么要呢？您加载不同图像的标准是“在移动设备上加载移动图像，并且仅在桌面上加载桌面图像”，这将完全满足移动检测。当然，您也可以使用媒体查询根据屏幕宽度选择要加载的图像，但它不是移动设备与桌面设备，而只是取决于屏幕宽度。
@Teemu 我之所以想要这样做是因为元素/背景图像在较小的屏幕尺寸上看起来与在大屏幕尺寸上的不同。我可以通过媒体查询来做到这一点，但是它已经加载了 html 元素（带有背景图像），这将加载 2 张图像并且对于页面加载更糟糕。你明白我的意思吗？
AFAIK 未应用 CSS 规则中的图像未加载..？
@Teemu 我编辑了我的问题。我认为我最大的问题是背景图片是从 CMS 上传的，所以我需要在元素上设置内联样式。我无法使用这些上传的图片“访问”CSS。
@Teemu 如果我不是很清楚，我很抱歉。我用一些代码编辑了我的帖子，我希望这能更清楚一点。

标签： javascript twitter-bootstrap sass responsive statamic

【解决方案1】：

您可以使用带有一点 JavaScript 的媒体查询来实现您想要的。想法是使用data-* 属性将图像的URL 传递到页面，然后使用JS 将URL 复制到CSS variables，最后媒体查询根据屏幕宽度显示想要的图像。像这样：

(function () {
  const div = document.querySelector('.bg-image'),
    src = div.getAttribute('data-bg').split(','), // Exctracts URLs from data-bg to an array
    html = document.documentElement; // A reference to <html> element
  html.style.setProperty('--bg-desktop', `url(${src[0]})`);
  html.style.setProperty('--bg-mobile', `url(${src[1]})`);  
}());

/* :root is <html> element */
:root {
  --bg-desktop: none;
  --bg-mobile: none;
}

.bg-image {
  min-height: 200px;
}

@media screen and (max-width: 768px) {
  .bg-image {
    background-image: var(--bg-mobile);
  }
}

@media screen and (min-width: 769px) {
  .bg-image {
    background-image: var(--bg-desktop);
  }
}

<div class="bg-image"
  data-bg="https://cdn.pixabay.com/photo/2016/09/04/20/14/sunset-1645103_960_720.jpg,https://cdn.pixabay.com/photo/2018/05/18/16/41/globe-3411506_960_720.jpg"
>
</div>

出于演示目的，我在 data-bg 属性中硬编码了 URL，但实际上，您将使用占位符写入值，然后由您的服务器替换为正确的 URL：

data-bg="{{ bg_image_desktop }},{{ bg_image_mobile }}"

由于未应用 CCS 规则中的图像不会加载，因此您可以确保桌面图像不会加载到屏幕小于 769 像素（或您放入 min-width 的任何设备）的设备上。在台式机上，首先加载其中一个图像，然后在调整窗口大小时，如果超出限制，也会加载另一个图像。

您也可以使用jsFiddle的代码。

【讨论】：

【解决方案2】：

最好的选择是对包含背景图像的元素使用媒体查询，即

<div class="bgImage"></div>

然后在 CSS 中，您基本上会为每个断点使用媒体查询。我将假设移动优先设计。

.bgImage {
   background: url(path_to_image);
}

@media screen and (min-width: 769px) {
  .bgImage {
    background: url(path_to_tablet_image);
  }
}

@media screen and (min-width: 1200px) {
  .bgImage {
    background: url(path_to_desktop_image);
  }
}

有一个网站screensiz.es，其中包含一系列针对移动设备的不同断点。

另外，再次阅读您的帖子后，我还会考虑将picture 元素与不同的图片srcset 一起使用。

【讨论】：

这是一个很好的解决方案，但不适用于 CMS 中动态上传的背景图像。因为我无法用这些标签控制 CSS。我需要在 html 元素上设置内联背景图像。
在这种情况下，图片元素就是您想要的。您只需要确保您的图像大小符合您在每个图片源上设置的不同断点。
是的，我想到了图片和 srcset，但对于背景图片，这是不可能的。