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

【问题标题】：iPhone 5 Media Queries Not Working Inside IframeiPhone 5 媒体查询在 iframe 中不起作用
【发布时间】：2017-10-10 19:06:30
【问题描述】：

我有一个加载 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>

【问题讨论】：

标签： html css iframe responsive-design iphone-5

【解决方案1】：

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

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

我通过将基本媒体查询设置为 200 像素来修复它。

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

【讨论】：