Question

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

我已经看到很多关于同一主题的问题。很多人说，添加

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hallnguyenrahimeen.findmycar.MainFragment">

    <com.google.android.gms.maps.MapView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/map" />

</FrameLayout>

一切似乎都很好。

我已经有了。我的css是：

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

在桌面上，我可以缩小窗口，然后看到我在css中指定的背景图像。在手机或平板电脑上，没有任何东西。

这里有效：更新：删除网址

为什么这不会影响移动设备？

Answer 1

将其添加到样式表的底部。它会使它工作。

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

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

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

所以我建议在移动设备上显示backgorund Image而不是视频。

UPDATE 在您的情况下，视频部分甚至不会加载到移动设备上，这就是为什么背景图像没有显示。您需要在图片中添加此项。还要摆脱你添加的旧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;
}
}

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

1 个答案: