这些解决方案不适合我(模糊)与Flexbox和iFrame在100%，但如果iFrame使用rem em或百分比单位，那么有一个解决方案看起来很棒:

  window.onload = function(){
    let ifElem = document.getElementById("iframe-id");
    ifElem.contentWindow.document.documentElement.style.fontSize="80%";
  }

跟进lxs的回答:我注意到一个问题，同时有缩放和——webkit-transform标签，似乎混淆了Chrome(版本15.0.874.15)，做一个双重缩放的效果。我可以通过用-ms-zoom(只针对IE)替换zoom来解决这个问题，让Chrome只使用——webkit-transform标签，这就解决了问题。

所以可能不是最好的解决方案，但似乎还可以。

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

显然不是试图修复父元素，只是添加了“缩放:50%”样式到子元素的主体，并使用了一点javascript。

也许可以设置“HTML”元素的样式，但没有尝试。

我刚测试过，对我来说，其他的解决方案都不奏效。 我只是简单地尝试了一下，它在Firefox和Chrome上运行得很好。

<div class='wrap'>
  <iframe ...></iframe>
</div>

还有css:

.wrap {
  width: 640px;
  height: 480px;
  overflow: hidden;
}

iframe {
  width: 76.92% !important;
  height: 76.92% !important;
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

这将所有内容放大23.08%，相当于原始版本比嵌入式版本大30%。(宽度/高度百分比当然需要相应调整(1/scale_factor))。

我找到了一个可以在IE和Firefox中运行的解决方案(至少在当前版本上是这样)。在Safari/Chrome上，iframe被调整到原始大小的75%，但iframe内的内容根本没有缩放。在Opera中，这似乎不起作用。这感觉有点深奥，所以如果有更好的方法，我欢迎建议。

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

注意:我必须在Firefox中使用wrap元素。出于某种原因，在Firefox中，当您将对象缩小75%时，由于布局原因，它仍然使用图像的原始大小。(试着从上面的示例代码中删除div，你就会明白我的意思了。)

我从这个问题中发现了一些。

如果你的html是用css样式的，你可能可以链接不同大小的不同样式表。