媒体查询适用于浏览器调整大小但不适用于移动设备

Question

这样做的目的是隐藏视频并将其替换为移动设备上的背景图像。

我见过很多关于同一主题的问题。很多人说，补充

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

一切似乎都很好。

我已经有了。我的 CSS 是：

@media screen and (max-width:999px) {
    .et_pb_section_video_bg {
        background-image:url("/wp-content/uploads/2017/02/Old-Instrument-Broken-Abandoned-Wrecked-Piano-Dark.jpg");
        background-size: cover;
    }
    #mep_0 { display: none; }
}

在桌面上，我可以缩小窗口并看到我在我的 css 中指定的背景图像。在手机或平板电脑上，什么都没有。

它在行动： 更新：删除网址

任何想法为什么这不适用于移动设备？

Answer 1

将此添加到样式表的底部。它会让它工作。

但是在移动设备上显示视频存在一个小问题。视频不会自动运行，因此您的视频不会自动在移动设备上播放。

更多：Youtube embedded video: autoplay feature not working in iphone

@media screen and (max-width: 999px){
#mep_0 {
    display: block;
  }
}

所以我建议在移动设备上显示背景图片而不是视频。

更新 在您的情况下，视频部分甚至不会加载到移动设备上，这就是没有显示背景图像的原因。您需要将此添加到您的图像中。也摆脱你添加的旧 css :)

@media screen and (max-width: 999px){
#homevid {
    background-image: url(https://fandf-si7mj9eju7kjbgtgaeu.netdna-ssl.com/wp-content/uploads/2017/02/Old-Instrument-Broken-Abandoned-Wrecked-Piano-Dark.jpg);
    background-size: cover;
}
}