0

I have a responsive iframe where I load a bootstrap 3 HTML template. I am building the ability for a user to customise the template by changing colors / fonts.

What I want to accomplish is keeping the HTML and CSS in large screen mode and scale the image down with the size of the iframe responding to browser changes.

Using this example I have succeeded in creating the iframe responsive in my page. But right now its contents will change to mobile CSS on the smaller page / iframe sizes.

Is it possible to fix the viewport of the iframe content to a medium to large screen? Or perhaps a responsive CSS class that scales the content with the iframe changes?

In my example, the content is in A4 page format, so I created a really small transparent png with A4 ratio per the suggestion in the example.

My HTML is:

<div class="row">
    <div class="col-xs-12 template-preview-container">
        <div class="h_iframe">
            <img class="ratio" src="/img/app/iframe-background.png"/>
            <iframe src="http://my/template/link" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
TheRealPapa
  • 4,393
  • 8
  • 71
  • 155
  • I'm assuming that you're generating the iframe, so in the actual html of the iframe page, can you set a min-width on the body element? This should cause the iframe to have a horizontal scrollbar if the iframe width is less than that min-width – shamsup Jun 09 '16 at 17:32
  • Hi @ShamSUP thanks for the response. I am trying to achieve keeping the contents in A4 mode and scale it to fit the iframe viewport. So on a mobile, the iframe would contain the desktop layout, just shrunk in size. – TheRealPapa Jun 09 '16 at 17:46
  • Does [this answer](http://stackoverflow.com/a/3131624/3101532) help at all? I do think that you'll have to set a min-width on the body element still, but I could be wrong. – shamsup Jun 09 '16 at 17:52
  • Hi ShamSUP, it certainly has kept me busy for 2 hours with no luck. I want to stay oin the desktop view and change its zoom to keep the width of the iframe and its contents to the width of the page. I have managed to get the JS code to work on window resize but it still changes to mobile at a point. Thanks, I will keep trying. – TheRealPapa Jun 09 '16 at 19:13

0 Answers0