媒体查询在 iframe 内不起作用 [英] Media queries not working inside an iframe

问题描述

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

I have in a webpage which is responsive. It makes use of media queries.

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

But the same page loaded in an iframe is not working.

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

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;
    }
}

因此，当我在新选项卡中加载该窗口并使浏览器宽度小于 640 像素时，背景颜色变为红色.

So when I load that window in a new tab and make the browser width less than 640px, background color becomes red.

但是同一个窗口在 320*480 尺寸的 iframe 中加载时没有背景颜色为红色.

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

如何在 iframe 中进行媒体查询?

How to make media queries work in an iframe?

推荐答案

试试这个方法，而不是 device 只针对 width

Try it this way, instead of device just target the width

改变

@media only screen and (max-device-width : 640px) {

到

@media only screen and (max-width : 640px) {

此外，如果您想避免考虑样式表中媒体查询声明的顺序，则更建议同时针对 min 和 max 视口宽度

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屋！