CODEWITHSUNDEEP
iphoneiosiframe
madslund
madslund

Reputation: 33

Size of content in iframe in iOS Safari (iPhone)

I have a problem with some content that I (sadly) need to use an iframe for. (It has to do with picky clients and domain names - it's out of my hands...)

Here is a page with the iframe: http://madslund.dk/test/iframepage.html

Here is the page with the actual content: http://madslund.dk/test/content.html

The iframe page basically just shows the content from the other page. No problem so far.

Here is the problem: The content inside the has a set width (700px) but resizes to fit the screen (max-width: 100% in the css). This works fine when viewing both pages in the browser, but on the iPhone, it only works when you view the content page directly.

Javascript: alert(window.outerWidth) outputs 320 (as expected) in iframepage.html, but 735 in content.html. So it seems like the iphone simply resizes the iframe to fit the content inside.

Upvotes: 3

Views: 2606

Answers (1)

Idra
Idra

Reputation: 5807

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.

Upvotes: 3

Related Questions