调整外部网站内容的大小以适合iFrame宽度

Question

我有一个包含2个iFrame的网页.它们都具有固定的宽度和高度.我在其中加载外部网站.如何调整外部网站的宽度以适应iFrame(就像移动浏览器通过更改视口一样)？

Answer 1

您可以做的是为iframe设置特定的宽度和高度(例如,这些可能等于您的窗口尺寸),然后对其应用缩放变换.比例值将是您的窗口宽度与您想要设置为iframe的尺寸之间的比率.

例如

<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>

像魔术一样工作!为了保持iframe,我还添加了iframe {-moz-transform-origin:左上角; -webkit-transform-origin:左上角; -o-transform-origin:左上角; -ms-transform-origin:左上角; 变换起源:左上角; } (8认同)
但iframe维度也会缩放,而不仅仅是内容的维度. (4认同)
@DotNetFan使用iframe宽度和高度播放,直到滚动条消失,然后将整个内容缩放到所需的大小. (3认同)
+1,非常好,但可能不是跨浏览器解决方案! (2认同)
是的,但这取决于您对跨浏览器解决方案的定义.AFAIK它应该在IE> 8中工作 (2认同)