Question

我的网站在标题div上有一个视频背景（如果视频没有加载，则会显示图像背景）。

我尝试做的只是当用户使用网站的网络版时才使用视频。对于移动版本，我不想要视频。

有办法吗？

Answer 1

您可以使用媒体查询：

#video-container {
  @media(max-width: 768px) {
    display: none;
  }
}

这只会在视觉上隐藏元素。

Answer 2

如果是移动/桌面，您可以check the user agent浏览器字符串并添加/删除视频代码：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // Javascript to remove video tag
}

Answer 3

除了使用phynam建议的媒体查询外，我还会使用modernizr来检查浏览器是否支持自动播放，如果没有，则隐藏视频并通过display:none显示图像。