title: iPhone 5 Media Queries Not Working Inside Iframe
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Has anyone found a way to make this work? Am I going to need some kind of javascript hack?</p>
  
  <p><strong>Container Source Code (container.htm):</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;iframe src="iframeContent.htm" style="border: none; height: 99%; width: 99%; margin: 0px; padding: 0px;"&gt;&lt;/iframe&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Iframe Source Code (iframeContent.htm):</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;style type="text/css"&gt;
        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; }
       }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;here is a paragraph of content.&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>