如何在桌面和移动设备的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 Media Queries来确定屏幕宽度并根据它设置样式。

iframe { height: 300px }

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