How to Get an Iframe to Be Responsive in iOS Safari

How to get an IFrame to be responsive in iOS Safari?

The solution for this problem is actually quite simple and there are two ways to go about it. If you have control over the Content.html then simply change the div#ScrolledArea width CSS to:

width: 1px;
min-width: 100%;
*width: 100%;
    

Basically the idea here is simple, you set the width to something that is smaller than the viewport (iframe width in this case) and then overwrite it with min-width: 100% to allow for actual width: 100% which iOS Safari by default overwrites. The *width: 100%; is there so the code would remain IE6 compatible, but if you do not care for IE6 you can omit it. Demo

As you can see now, the div#ScrolledArea width is actually 100% and the overflow: scroll; can do it's thing and hide the overflowing content. If you have access to the iframe content, then this is preferable.

However if you do not have access to the iframe content (for what ever reason) then you can actually use the same technique on the iframe itself. Simply use the same CSS on the iframe:

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

However, there is one limitation with this, you need to turn off the scrollbars with scrolling="no" on the iframe for this to work:

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

If the scrollbars are allowed, then this wont work on the iframe anymore. That said, if you modify the Content.html instead then you can retain the scrolling in the iframe. Demo

IFrame height issues on iOS (mobile safari)

It looks like this: How to get an IFrame to be responsive in iOS Safari?

iFrames have an issue on iOS only, so you have to adapt your iframe to it.

You can put a div wrapping the iframe, set css on the iframe and, what worked for me, was to add: put the attribute scrolling='no'.

Wishing you luck.

iframe size with CSS on iOS

You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/

According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue

Size of content in iframe in iOS Safari (iPhone)

It seams that in iOS 7 the Mobile Safari turned the seamless attribute for the iframe on by default with no way to turn it off. (Or at least form my own test on the Mobile Safari, this seams the case.) As of yet, I have not found of a way to make the IFrame responsive and retain the scrolling of the frame, but if you are willing to sacrifice the vertical scrolling you can use this code:

HTML:

<iframe scr="content.html" scrolling="no"></iframe>

CSS:

iframe {
    min-width: 100%; 
    width: 100px;
    *width: 100%; 
}

This solution works in a cross browser way, but keep in mind, if you turn the scrolling to "yes" then it won't anymore so you do need to know the height of your content.

How to make iFrame responsive in iPhone 6?

This problem is solved, simply had to apply this styling. I did an inline-css to this.

 width: 1px;
 min-width: 100%;
 *width: 100%;

Here is a link to a more detail answer

---

Related Topics