媒体查询在 iframe 中不起作用
Posted
技术标签:
【中文标题】媒体查询在 iframe 中不起作用【英文标题】：Media queries not working inside an 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 中工作？
【问题讨论】：
在父窗口中设置视口。解决方案在这里：***.com/a/20838525/5016546 【参考方案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 设备上是这样。
<meta name="viewport" content="width=device-width, initial-scale=1">【讨论】：
请注意，要使其在 ios 上运行，您需要：***.com/questions/23083462/… 是的，当我没有将它放在托管有问题的 iframe 的页面的头部时，我就遇到了这个问题。感谢您的提示！【参考方案3】：我最终不得不以 iframe 宽度为目标。 （可能并非在所有情况下都有效） 但我所做的是让 iframe 的宽度为 100%，然后它会随窗口调整大小，所以我所做的只是针对 iframe 的 px 而不是窗口
【讨论】：
【参考方案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 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章