使用 jQuery 使 iframe 响应式，全部适用于移动设备

Question

在我的 SharePoint 环境中，我必须使用页面查看器将自定义 HTML 表单加载到 iframe 中。除了布局设置为强制宽度之外，一切正常。这意味着屏幕的左侧和右侧非常开放。我对 CSS 甚至覆盖选择器都非常擅长，但我还没有研究过如何使 iframe 及其子框架在布局设计中具有响应性。我们如何使用 jquery 从头开始​​实现它？

我非常希望 iframe 的宽度与其父容器一样宽，并且还能够滚动更长的内容。我知道它不仅仅是 100% 的宽度。此外，这是否适用于移动设备 - 这是我的最终目标。

有什么小例子吗？

谢谢！

Answer 1

获取浏览器的宽度：

$(window).width();

获取窗口的高度：

$(window).height();

设置 iframe 的宽度和高度的宽度（假设只有一个）：

$('iframe').height($(window).height());
$('iframe').width($(window).width());