Madia查询不在iframe内部工作

Question

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

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

<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？

内也是如此

Answer 1

好的，我有两个小提琴。

这有I帧和媒体查询： https://jsfiddle.net/DIRTY_SMITH/komfhjdj/11/

这个人有你iframe： https://jsfiddle.net/DIRTY_SMITH/ynk1k1hj/

请注意，当iframe中的视口低于300px

时，背景颜色会发生变化

我不知道您的具体问题，所以我给您一个广泛的答案，但是，如果有任何问题请留下评论，我会尝试为您解答