javascript - 如何在桌面和移动设备的 Jquery 中设置两个不同的 iframe 高度？

Question

这是我的 iframe 代码

    <iframe src="http://myurl.com" opacity="0" scrolling="no" margin-top="10px" marginwidth="0" marginheight="0" align="middle" frameborder="0" width="100%" height="215px"></iframe>

我只想为桌面设备和移动设备使用两种不同的 iframe 高度。例如对于桌面设备 iframe 高度应为 215px对于移动设备(Android、Iphone、Ipad)iframe 高度应为 415px

我如何从 Jquery 执行此操作？

Answer 1

使用 CSS 设置它并使用 CSS 媒体查询来确定屏幕宽度并根据它设置样式。

iframe { height: 300px }

@media only screen and (max-width: 800px) { 
  iframe { height: 500px }
}