媒体查询无法在iframe中工作 [英] Media queries not working inside an iframe

问题描述

我有一个响应的网页。它使用媒体查询。

但是在iframe中加载的同一页面不起作用。

例如，考虑到我的网页，当屏幕宽度小于640像素时，我已将背景颜色设置为红色。

  @media只有屏幕和（max-device-width：640px）{
 
 .header-text {
 background-color：red; 
} 
} 
  

因此，当我在新标签页使得浏览器宽度小于640像素，背景颜色变为红色。

但是在320 * 480尺寸的iframe中加载相同的窗口时，背景颜色不是红色。 / p>

简短的媒体查询无法在iframe中使用。

Pls帮助。

解决方案

尝试这样，而不是设备只针对 / code>

更改

 和（max-device-width：640px）{
  

到

  @media only screen and（max-width：640px）{
  

此外，如果您想避免考虑媒体查询声明的顺序，建议您同时指定 min 和最大样式表

  @media screen and（min-width：320px）and（max-width：640px）{
 .header-text {
 background-color：blue; 
} 
} 
  

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.

For example, consider to my webpage, I have given background color as red when the screen-width is less than 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.

But the same window when loaded in an iframe of 320*480 dimensions does not have background color red.

In short media queries are not working in an iframe.

Pls help.

解决方案

Try it this way, instead of device just target the 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 min and max view-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;
    }
}

这篇关于媒体查询无法在iframe中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！