css 媒体查询在iframe中不起作用

3duebb1j 于 2023-04-01 发布在其他

关注(0)|答案(5)|浏览(223)

我有一个网页是响应式的。它利用媒体查询。
但是在iframe中加载的相同页面不起作用。
例如，考虑到我的网页，当屏幕宽度小于640px时，我将背景色设置为红色。

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

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

所以当我在一个新标签中加载该窗口并使浏览器宽度小于640px时，背景颜色变为红色。
但是，当加载到320*480尺寸的iframe中时，相同的窗口没有红色背景色。
如何在iframe中进行媒体查询？

css

来源：https://stackoverflow.com/questions/27227214/media-queries-not-working-inside-an-iframe

5条答案

按热度按时间

jv4diomz1#

尝试这种方式，而不是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;
    }
}

赞(0）回复(0）举报 2023-04-01

emeijp432#

在加载iframe的HTML中包含 metabellow，它应该可以工作，至少在android设备上。

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

赞(0）回复(0）举报 2023-04-01

vu8f3i0k3#

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

赞(0）回复(0）举报 2023-04-01

vx6bjr1n4#

我遇到的一个类似的问题，媒体查询没有按预期工作，是iframe上的空src值。
我有一个沙盒iframe来预览另一个页面中的电子邮件模板，我使用javascript注入来填充iframe的html内容，然后通过 AJAX 调用一个服务来获取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>

赞(0）回复(0）举报 2023-04-01

envsm3lx5#

检查 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>

赞(0）回复(0）举报 2023-04-01

我来回答

css 媒体查询在iframe中不起作用

5条答案

相关问题

热门标签

最新问答