Html 媒体查询在 iframe 内不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27227214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media queries not working inside an iframe
提问by Aniket
I have in a webpage which is responsive. It makes use of media queries.
我有一个响应式的网页。它使用媒体查询。
But the same page loaded in an iframe is not working.
但是在 iframe 中加载的同一页面不起作用。
For example, consider to my webpage, I have given background color as red when the screen-width is less than 640px.
例如，考虑到我的网页，当屏幕宽度小于 640px 时，我将背景颜色设置为红色。
@media only screen and (max-device-width : 640px) {
.header-text {
background-color: red;
}
}
So when I load that window in a new tab and make the browser width less than 640px, background color becomes red.
因此，当我在新选项卡中加载该窗口并使浏览器宽度小于 640 像素时，背景颜色变为红色。
But the same window when loaded in an iframe of 320*480 dimensions does not have background color red.
但是在 320*480 尺寸的 iframe 中加载时相同的窗口没有背景颜色红色。
How to make media queries work in an iframe?
如何使媒体查询在 iframe 中工作？
回答by NoobEditor
Try it this way, instead of devicejust target the width
以这种方式尝试，而不是device仅仅针对width
Change
改变
@media only screen and (max-device-width : 640px) {
to
到
@media only screen and (max-width : 640px) {
Also, it is more advised to target both minand maxview-port width if you want to avoid considering order of media query declarations in your style-sheet
此外，如果您想避免考虑样式表中媒体查询声明的顺序，则更建议同时针对最小和最大视口宽度
@media screen and (min-width: 320px) and (max-width: 640px) {
.header-text {
background-color: blue;
}
}
回答by Kiko
Include the meta bellow into the HTML which loads your iframe and it should work, at least on android devices.
将下面的元包含在加载 iframe 的 HTML 中，它应该可以工作，至少在 android 设备上是这样。
<meta name="viewport" content="width=device-width, initial-scale=1">回答by James Harrington
I ended up having to target the iframes width. (May not work in all situations)
But what i did was make the iframe 100% width and then it would resize with the window, so all i did was target the px of the iframe instead of the window
我最终不得不针对 iframe 宽度。（可能不适用于所有情况）
但我所做的是使 iframe 宽度为 100%，然后它会随着窗口调整大小，所以我所做的只是针对 iframe 的 px 而不是窗口
回答by Aris Gatoudis
A similar issue i had, where media queries were not working as expected, was the empty src value on the iframe.
我遇到的一个类似问题是，媒体查询没有按预期工作，是 iframe 上的空 src 值。
I had a sandboxed iframe to preview email templates inside another page. I used javascript injection to fill the iframe's html content after getting the html data with an ajax call to a service.
我有一个沙盒 iframe 来预览另一个页面内的电子邮件模板。在通过对服务的 ajax 调用获取 html 数据后，我使用 javascript 注入来填充 iframe 的 html 内容。
The solution for me was to create an empty html file, set this to the iframe src and then update the content with javascript.
我的解决方案是创建一个空的 html 文件，将其设置为 iframe src，然后使用 javascript 更新内容。
Code on my page:
我页面上的代码：
<iframe src="/myfolder/dummy.html"></iframe>Code for the iframe src:
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>