移动设备需要最小化 iframe

Question

我目前正在www.georound.com 建立一个站点，当您单击地图上的图钉时，会弹出一个 infoWindow，其中包含使用 iframe 嵌入的视频。 我的问题是这些视频在桌面上看起来很棒，但是一旦我尝试在移动设备上打开页面，iframe 太大并且无法调整移动设备的大小，infoWindow 本身会调整大小并且在移动设备上看起来不错。

我尝试更改 iframe 的 css，但每次我将它缩小到移动设备上时，它在桌面上也会变小！！

当我在手机侧翻手机上打开 infoWindow 时，显示也正常。只是当屏幕很小时，iframe 才无法正确调整大小。

感谢任何帮助，谢谢。

Answer 1

您需要在您的 CSS 中使用 @media 来定义您希望某些 CSS 规则应用的屏幕尺寸。

例如：

@media (max-width: 600px) {
 iframe {
   width: 50vw;
 }
}