我有一个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
?
答案 0 :(得分:1)
好的,我有两个小提琴。
这有I帧和媒体查询: https://jsfiddle.net/DIRTY_SMITH/komfhjdj/11/
这个人有你iframe
:
https://jsfiddle.net/DIRTY_SMITH/ynk1k1hj/
请注意,当iframe中的视口低于300px
我不知道您的具体问题,所以我给您一个广泛的答案,但是,如果有任何问题请留下评论,我会尝试为您解答