resize - 如何调整 iframe 内容的大小

Question

我创建了一个网站，并使用视点元标记，将内容设置为 1200px <meta name="viewport" content="width=1400, initlia-sclae=1.0, user-scalable=yes">，. 好吧，它工作正常，但现在我必须创建一个 iframe（在外部站点中），其中包含我的站点。但是我可用的空间小于内容宽度，所以你必须水平滚动才能查看所有内容。

我试过这样做：<iframe src="http://tlicetlac.tumblr.com" width="800px" height="400px" style="-webkit-transform:scale(0.9);-moz-transform-scale(0.9);"></iframe>但没有工作，因为也调整了 iframe 的显示区域。

那么，我可以设置多个视点来调整多个网站的内容吗？

Answer 1

我试过你的代码，效果很好。你可以在这里看到Resize external website content to fit iFrame width

我用它来调整从另一个网站到我的网站的世界时钟地图的大小。
这是我的代码：

<div id="containerworldTime">
  <iframe src="http://24timezones.com/" width="992" height="500" scrolling="no" ></iframe>
</div>  
#containerworldTime {
    height: 395px;
    margin:auto;
    overflow: hidden;
    width: 770px;
    border:red solid 5px;
}
#containerworldTime iframe {
    border: 0 solid;
    height: 1103px;
    margin-left: -110px;
    margin-top: -385px;
    width: 979px;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -o-transform:scale(0.8);
    -ms-transform:scale(0.8);
}    

看看这个例子

Answer 2

<div
   style="
      overflow: hidden;
      display:inline-block;">
   <iframe
      src='https://en.wikipedia.org/wiki/Punding'
      scrolling="no"
      frameBorder="0"
      style="
          width: 660px;
          height: 1000px;
          margin-top: -180px;
          margin-left: -200px;
        -webkit-transform:scale(0.8);
        -moz-transform:scale(0.8);
        -o-transform:scale(0.8);
        -ms-transform:scale(0.8);"
   ></iframe>
</div>