Search code examples
htmlcssiframeresponsive-designiphone-5

iPhone 5 Media Queries Not Working Inside Iframe

I have a container page which loads an iframe, which is set to 99% width and height. The content of the iframe is responsive, using media queries. The container page happens to also be responsive, using media queries, but I don't think that's particularly important here.

This works fine on modern browsers, and on iPhone 6, but it doesn't work on iPhone 5. The 5 is entirely ignoring the media queries.

You can test this using Chrome's iPhone 5 emulator and the problem is immediately visible. Using the sample code below, the paragraph should have a border color #f00, but instead it remains #ccc. I also verified on a real iPhone 5 and it matched Chrome's emulation.

Note that if you load the iframe content in a separate page, the media queries work just fine on iPhone 5 - the problem only occurs when loaded inside an iframe.

Has anyone found a way to make this work? Am I going to need some kind of javascript hack?

Container Source Code (container.htm):

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <iframe src="iframeContent.htm" style="border: none; height: 99%; width: 99%; margin: 0px; padding: 0px;"></iframe>
  </body>
</html>

Iframe Source Code (iframeContent.htm):

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      p { border: 1px solid #ccc; }

      @media screen and (min-width: 310px) {
         p { border: 1px solid #f00; }
      }

     @media screen and (min-width: 350px) {
        p { border: 1px solid #00f; }
     }
    </style>
  </head>
  <body>
    <p>here is a paragraph of content.</p>
  </body>
</html>
Solution

  • Arg, the problem had nothing to do with the media queries not being supported via iframe, or with iPhone 5.

    With the iframe being 99% width, and the default 8px margin on the body element, the content inside the iframe thought that the screen was only 301px wide, which was too small to be covered by the 310px width media query, and there were no other rules that caught it.

    I fixed it by making the base media query 200px.

    @media screen and (min-width: 200px) {
     p { border: 1px solid #f00; }
  }