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.

Dael

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.

Dael

A bit old, but there is a solution for the scrolling="no" issue here: #23083962 – Mylo

@Mylo yes I know, that is when I fully started to understand this problem and found all the possible solutions. The original problem is that iOS sets by default the iFrames seamless attribute to TRUE and it can't be overwritten. I thought about modifying this question, but in Meta I was told that, because I would need to change this question and answer so much it's better to ask a new question. If you are having this problem do check the other Q&A I made and it explains when this issue occurs and how to solve it and when the scrolling="no" is actually needed and when you can omit it. – Dael

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/

Tangential

Well this is the standard way you get rid of the seamless attribute and make it possible to scroll the iframe content in iOS Safari, but the given question was about how to get the iframe to resize itself to the container element without scrollbars – Dael