0

Hope this makes sense, but I couldn't understand why the twitter-bootstrap I was loading in a iframe on mobile was not being responsive. Until I realized after alot of investigations, it was to do with the viewport size being reported by the parent page.

When I use this code on the parent, the size of viewport reported to the iframe changes and therefore bootstrap responds accordingly and works for mobile. But when I remove it, the page is unreadable and zoomed out.

<meta content="initial-scale=1.0" name="viewport" />

Even though the above code is already included in the bootstrap theme in the iframe, it has no affect and seems that viewport resize only happens on parent page level, viewport does not work inside of the iframe?

Which causes an issue as I can never control what goes on the parent page to ensure the right viewport?

How does one overcome this issue?

This is the basic html with iFrame, as you will see when you visit the site in an iframe, even though twitter-bootstrap, it is zoomed out

<html>
    <head>
        <title>Page Title</title>
        <style>
        </style>
    </head>
    <body>
         <iframe style="width: 100%; height: 100%; max-width: 100%;" src="http://startbootstrap.com/"></iframe> 
    </body>
</html>
Thomas Bormans
  • 5,156
  • 6
  • 34
  • 51
adam gouldie
  • 251
  • 3
  • 16
  • http://stackoverflow.com/questions/25228056/responsive-iframe-using-bootstrap – aredzko Aug 19 '15 at 13:24
  • The link you provided assumes the parent page already contains twitter-bootstrap code to be able to apply the sytax to the parent iframe, which this example does not. The parent page conatins no bootstrap code, only the iframe does – adam gouldie Aug 19 '15 at 13:27
  • Actually even taking the css for the embed does nothing to stop iframe content being zoomed out because it can not pick up the viewport size – adam gouldie Aug 19 '15 at 13:34
  • I don't follow then. Here's using the example you gave above except adding `resize: both;` to let us resize the window, and setting `width: 25%` to start resizing. Resizing iframe: http://i.imgur.com/PjmlD87.gif ; Resizing Parent: http://i.imgur.com/NkBOhwo.gif ; In what context does this not work for you? What browser are you using? Are you on mobile? – aredzko Aug 19 '15 at 13:46
  • I do not want to resize the iframe. It is the content INSIDE of the iframe not operating as one would do if you had visited the site directly. If you visit that website "http://startbootstrap.com/" on a mobile, you will see bootstrap resizes based on viewport so content is not zoomed out and readjusts via the viewport. BUT when you visit that website using an iframe you do not get the same results because of this viewport issue – adam gouldie Aug 19 '15 at 13:56
  • which results in the full webpage, but zoomed out to a point that it is unreadable. Is it making sense? I think you might not understand until you visit the site using mobile directly, and visiting the site via iframe on a high pixel count mobile. You will definetly see the difference – adam gouldie Aug 19 '15 at 13:58
  • The second gif I posted shows that when the parent viewport changes, if you specify the `max-width: 100%;`, like you did, the iframe changes to fill the parent. This should produce the same result, no? – aredzko Aug 19 '15 at 13:58
  • No. Because twitter-bootstrap does it's own thing depending on viewports and media queries and restructures the whole webpage based on it which is dependant on screen pixel size. Regardless if you change the iframe to fit the whole page or not in the parent, twitter-bootstrap INSIDE of the iframe is unable to get the viewport size and therefore page is rendered as a FULL website. – adam gouldie Aug 19 '15 at 14:08
  • instead of the mobile design, so really the question here is, how do I get the boostrap INSIDE of the iFrame, to get the correct viewport size of parent – adam gouldie Aug 19 '15 at 14:09
  • I can't seem to find a solution that will work for this for mobile. Sorry! Hopefully someone else is able to help. – aredzko Aug 19 '15 at 14:31
  • no problem thanks for your help. I just assumed the iframe would be able to get the viewport size itself, but I guess that's not how it works. – adam gouldie Aug 19 '15 at 14:37

0 Answers0