媒体查询在iframe内无法正常工作

Question

媒体查询在iframe内无法正常工作

37

我有一个响应式网页，使用了媒体查询。

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

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

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

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

当我在新标签页中加载该窗口并将浏览器宽度缩小到小于640px时，背景颜色变为红色。

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

如何使媒体查询在iframe中起作用？

- Aniket

1

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

5个回答

20

将下面的meta标签包含在加载iframe的HTML中，它应该可以在Android设备上正常工作。

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

- Kiko

1

请注意，要在iOS上使其正常工作，您需要使用以下内容：https://dev59.com/qGAg5IYBdhLWcg3w3eJi - Kiko

是的，当我没有将这个放在承载有问题的 iframe 的页面头部时，我也遇到了这个问题。谢谢你的提示！ - Iulian Pinzaru

8

我最后不得不定位iframe的宽度。（可能不适用于所有情况）
但我所做的是将iframe设置为100％的宽度，这样它会随着窗口大小调整而自动调整大小，因此我只需定位iframe的像素而不是窗口的像素。

- James Harrington

0

检查iframe属性：确保iframe没有阻止样式加载。检查sandbox和allow属性，看看它们是否限制了样式的加载。

您的iframe可能如下所示：

<iframe src="https://example.com" sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation" scrolling="auto" >
</iframe>

- VierTretten

0

我遇到过类似的问题，媒体查询没有按照预期工作，原因是 iframe 的 src 值为空。

我在另一个页面中使用沙盒 iframe 来预览电子邮件模板，通过 JavaScript 注入，在从服务获取 HTML 数据后填充 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>

- Aris Gatoudis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NoobEditor · Accepted Answer

尝试这种方式，不要针对device而是针对width进行目标设置。

更改为

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

为了

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

此外，如果您想避免考虑样式表中媒体查询声明的顺序，建议同时定位最小和最大视口宽度。

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