根据 iframe 的大小动态更改 iframe 页面缩放答案

【问题标题】：Changing iframed page zoom dynamically based on size of iframe根据 iframe 的大小动态更改 iframe 页面缩放
【发布时间】：2013-02-06 13:08:25
【问题描述】：

是否可以从框架页面检测 iframe 的高度和宽度，并根据它设置缩放，以便页面适合 iframe 的内容 100 宽度。

例如，我有一个页面，其 min.宽度是 960 像素，但有人想在 690 像素宽度的 iframe 中显示我的页面，没有滚动条。

我将如何检测并据此缩放内容，以便人们可以看到整个页面但缩小后的页面？

【问题讨论】：

我建议你使用“viewport”来自动检测窗口大小（包括iframe），然后它会导入正确的样式文件。

标签： javascript jquery html css

【解决方案1】：

元概念可能如下：

// Check if window is inside of an iframe
if (window.self !== window.top) {
    var optimalSize = 500; // desired width of the page
    document.body.style.zoom = optimalSize / window.innerWidth;
}

另一种选择可能是使用媒体查询来应用适当的样式 - 我认为这对您的情况来说是最好的。

【讨论】：