'How to resize iframe content

I've create a website and with the viewpoint metatag, I've set the content with to 1200px, <meta name="viewport" content="width=1400, initlia-sclae=1.0, user-scalable=yes">. Well it's work fine, but now I have to create an iframe (in an external site) with my site in it. But the space available to me is smaller than the content width, so you have to scroll horizontaly to view all.

I've tried do this: <iframe src="http://tlicetlac.tumblr.com" width="800px" height="400px" style="-webkit-transform:scale(0.9);-moz-transform-scale(0.9);"></iframe> but didn't work because resized the iframe's display area too.

So, can I for example set multiple viewpoint to resize the content for multiple web sites?

resize


Solution 1:[1]

I tried your code and it worked fine . you can see here Resize external website content to fit iFrame width

i used it to resize a world clock map from another web site to my web site.
here is my code: 

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

and see this example

Solution 2:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2

Related Questions