Iframe Size with CSS on iOS

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

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:

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

Prevent iframe from sizing to height of its own content on iOS

You should be able to just set the overflow to hidden. This will clip to the set size. I wouldn't use the iframe though. They are considered obsolete in page layouts.

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.

how to set iFrame height and width same as WKWebView frame?

In your embedVideoHtml before add the following code:

    * { margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; }

and in the player parameters change the following parameters:

height: '\(myPlayer.frame.height)',
width: '\(myPlayer.frame.width)',

to:

height: '100%',
width: '100%',

After these changes your player should be adjusted to the size of WKWebView

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:

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.

iFrame wider than the entire screen on iPhone 6

There are two way to achieve your solution.

1. Simply wrap your iframe in a div with:

overflow: auto;-webkit-overflow-scrolling:touch;

Here's your example with it: http://jsfiddle.net/R3PKB/7/

2. Or you can try this using css:

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

If you set the width to lower than the portrait width and set the min-width to 100%, then you sill get width: 100%, but this time a version that actually works and now the iframe takes the actual container width and not the landscape width. The *width: 100%; is there so that in IE6 the width would still be 100%.

However this only works with the iframe attribute scrolling="no", if the scrolling is allowed, then it does not work anymore. So this might limit it's usefulness in some cases.

Here is a link to a more detail answer

---

Related Topics