3

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.

madslund
  • 33
  • 3

1 Answers1

3

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.

Idra
  • 5,777
  • 4
  • 22
  • 33
  • Why in the world does width: some large number px have to be set for max-width to work? Is it a known iOS bug? – NoBugs Nov 24 '15 at 21:42
  • @NoBugs its not a bug exactly as far as I know Apple did it intentionally it has to do with horizontal scrolling areas within a page, [you can see this question here](http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari/23083463#23083463), where I posted the problem and solution when I understood it completely, but it's basically down to the seamless attribute. As to your problem, then as long as the screen width is smaller than the allocated width, then there should not be a problem. – Idra Nov 25 '15 at 10:13