html - 媒体查询在 iframe 中不起作用

<分区>

想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题.

关闭 7 年前。

我有一个包含 iframe 元素的 HTML 页面，该元素占据了窗口宽度的 100%。在 iframe 的 HTML 和 CSS 中，我尝试使用媒体查询，但它们似乎不起作用。

我在 iframe 标记的 head 中包含了以下内容:

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

并尝试在 iframe CSS 文件中使用它:

@media (max-device-width: 500px) {...}

或

@media only screen and (max-device-width: 500px) {...}

或

@media only screen and (max-width: 500px) {...}

如果我尝试在没有 iframe 的普通页面中使用此代码，它可以正常工作。

即使在 iframe 中，媒体查询也应该不起作用吗？

最佳答案

好的，我有两把 fiddle 给你。

请注意当 iframe 中的视口(viewport)低于 300px 时背景颜色会发生变化

我不知道你的具体问题，所以我给你一个宽泛的答案，但是，如果有任何问题，请给我留言，我会尽力为你解答

关于html - 媒体查询在 iframe 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34642597/

相关文章：

jquery - 包装内的 float div 向右