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

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/