iPhone 5 个媒体查询在 iframe 中不起作用

Question

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

这在现代浏览器和 iPhone 6 上运行良好，但在 iPhone 5 上不起作用。5 完全忽略了媒体查询。

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

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

有没有人找到一种方法来完成这项工作？我需要某种 javascript 技巧吗？

容器源代码(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 中不起作用

iPhone 5 Media Queries Not Working Inside Iframe

html

css

iframe

responsive-design

iphone-5