Question

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

但iframe中加载的同一页面无效。

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

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

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

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

但是，在320 * 480维度的iframe中加载时，同一窗口的背景颜色没有红色。

如何让媒体查询在iframe中运行？

Answer 1

尝试这种方式，而不是device只定位width

更改

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

到

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

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

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

Answer 2

将meta bellow包含在加载iframe的HTML中，它应该可以工作，至少在Android设备上。

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 3

我最终不得不定位iframes的宽度。（可能不适用于所有情况）
但我所做的是使iframe 100％宽度，然后它会调整窗口大小，所以我所做的只是目标iframe的px而不是窗口

Answer 4

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

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

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

页面上的代码：

<iframe src="/myfolder/dummy.html"></iframe>

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>

媒体查询无法在iframe中运行

4 个答案: