javascript - 根据 iframe 的大小动态更改 iframe 页面缩放

Question

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

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

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

Answer 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;
}

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