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

【问题标题】：Media queries not working inside an iframe媒体查询在 iframe 中不起作用
【发布时间】：2015-01-29 09:19:59
【问题描述】：

我有一个响应式网页。它利用媒体查询。

但在 iframe 中加载的同一页面无法正常工作。

例如，考虑到我的网页，当屏幕宽度小于 640 像素时，我将背景颜色设置为红色。

@media only screen and (max-device-width : 640px) {

    .header-text {
        background-color: red;
    }
}

因此，当我在新选项卡中加载该窗口并使浏览器宽度小于 640 像素时，背景颜色变为红色。

但同一个窗口在 320*480 尺寸的 iframe 中加载时没有红色背景色。

如何让媒体查询在 iframe 中工作？

【问题讨论】：

在父窗口中设置视口。解决方案在这里：stackoverflow.com/a/20838525/5016546

标签： html css iframe media-queries

【解决方案1】：

试试这种方式，而不是device，只针对width

改变

@media only screen and (max-device-width : 640px) {

到

@media only screen and (max-width : 640px) {

此外，如果您想避免在样式表中考虑媒体查询声明的顺序，建议同时针对 min 和 max 视口宽度

@media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
}

【讨论】：

这对我来说适用于“max-device-width”，但不适用于“max-width”。对于“最大宽度”，重要的是 iframe 的大小。

【解决方案2】：

将下面的元数据包含在加载 iframe 的 HTML 中，它应该可以工作，至少在 android 设备上是这样。

&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

【讨论】：

请注意，要使其在 iOS 上运行，您需要：stackoverflow.com/questions/23083462/…
是的，当我没有将它放在托管有问题的 iframe 的页面的头部时，我就遇到了这个问题。感谢您的提示！

【解决方案3】：

我最终不得不以 iframe 宽度为目标。（可能并非在所有情况下都有效）
但我所做的是让 iframe 的宽度为 100%，然后它会随窗口调整大小，所以我所做的只是针对 iframe 的 px 而不是窗口

【讨论】：

【解决方案4】：

我遇到的一个类似问题是 iframe 上的空 src 值，媒体查询没有按预期工作。

我有一个沙盒 iframe，可以在另一个页面中预览电子邮件模板。在通过对服务的 ajax 调用获取 html 数据后，我使用 javascript 注入来填充 iframe 的 html 内容。

我的解决方案是创建一个空的 html 文件，将其设置为 iframe src，然后使用 javascript 更新内容。

我页面上的代码：

&lt;iframe src="/myfolder/dummy.html"&gt;&lt;/iframe&gt;

iframe src 的代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="description" content="corrects media queries fails of email template previews" />
  <title></title>
</head>

<body>

</body>

</html>

【讨论】：