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

【问题标题】：How to set two different iframe heights in Jquery for Desktop and Mobile Devices?如何在桌面和移动设备的 Jquery 中设置两个不同的 iframe 高度？
【发布时间】：2017-08-17 09:22:14
【问题描述】：

这是我的 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 做到这一点？

【问题讨论】：

不要为此使用 JS。 CSS Media Queries 正是出于这个原因而发明的。
也许你可以参考这个stackoverflow.com/questions/3514784/…
另外，请将任何相关代码复制并粘贴到问题中。代码图像几乎没用。
谢谢。你能帮我用确切的css代码来做到这一点吗？

标签： javascript jquery html css iframe

【解决方案1】：

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

iframe { height: 300px }

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

【讨论】：