Question

我有一个容器页面，它加载一个iframe，设置为99％的宽度和高度。使用媒体查询，iframe的内容具有响应性。容器页面恰好也是使用媒体查询的响应，但我不认为这在这里特别重要。

这在现代浏览器和iPhone 6上运行良好，但它在iPhone 5上无效.5完全忽略了媒体查询。

您可以使用Chrome的iPhone 5模拟器对此进行测试，问题立即显现。使用下面的示例代码，段落应该有一个边框颜色＃f00，但它仍然是#ccc。我还在真正的iPhone 5上验证了它与Chrome的仿真相匹配。

请注意，如果您在单独的页面中加载iframe内容，则媒体查询在iPhone 5上运行正常 - 只有在iframe中加载时才会出现此问题。

有没有人找到办法让这项工作？我是否需要某种javascript hack？

容器源代码（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源代码（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>

Answer 1

Arg，问题与通过iframe或iPhone 5不支持的媒体查询无关。

iframe的宽度为99％，body元素的默认8px边距，iframe内的内容认为屏幕只有301px宽，太小而无法覆盖310px宽度的媒体查询，并且没有其他规则可以抓住它。

我通过使基本媒体查询200px来修复它。

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

iPhone 5媒体查询无法在iframe内部工作

1 个答案: