How to get iframe width 100% in iPhone portrait view

Question

Basically I am having the same problem as here, but because he never got a good answer I am reposting the question.

So the problem is that only in iPhone Safari the width="100%" on the portrait view seems to be misbehaving and giving the IFrame the landscape width. And I can't seem to figure out what is going on here.

I am using the correct viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

And the site within the IFrame can actually go way narrower than 320px and also has the same viewport defined. (I've read on one of the similar questions that this can be a factor so I am just clarifying).

In the debugger I can see, that before the URL was added, the iFrame's offsetWidth was 304px which is correct and after the load it was 588px, which is correct for the landscape view. But why it changed I have no idea. The page within the IFrame comes from a different domain so that could not effect it and the main page does not do anything with the iframe's width.

The iPhone I am using is an iPhone 5 iOS 7.0.2

PS. Please do not post any JS answers where you resize the iframe manually on window resize, I am currently looking for a non JS fix, and this is my last option that I plan to use. Also please do no post the @media CSS answer were you set min-width to 320px on iPhone portrait view width, that would not work for me for various reasons.

Answer 1

OK so after hours of debugging I finally found the solution I was after, but unfortunatelyit is not a pure CSS solution:

The CSS you must apply is this:

    iframe {
        min-width: 100%; 
        width: 100px;
        *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.

Answer 2

It is answered here: iframe size with CSS on iOS

Simply wrap your iframe in a div with:

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

http://jsfiddle.net/R3PKB/7/