jquery - 媒体查询由灯箱触发

Question

我正在使用 Fancybox 2，并且有一个如下所示的媒体查询：

@media (max-width : 1200px) {

#columnset1_column1 {
    display: none;
}
#sitelayout6 {
    width: 980px !important;
}
#columnset3 {
    display: block;
}
#columnset2 {
    margin-top: 70px;
}
}

但奇怪的是当显示 iframe 的灯箱时触发媒体查询。它显示的页面只有 700 像素宽。

这只是 Internet Explorer 中的问题，而不是 Chrome 中的问题。

窗口大小在任何时候都不会调整大小。

Answer 1

我在这里找到了一个有帮助的答案： Fancybox 2 Forcing Responsive Media Queries in IE

基本上，在 iframe 中，更新对 CSS 的引用以包含查询字符串...

因此，在您的父页面中，您有：

<link rel="stylesheet" href="screen.css" />

在你的 iframe 中，你有

<link rel="stylesheet" href="screen.css?iframe=true" />

这解决了 IE 中的一个错误，该错误导致 iframe 在您的 css 中触发父页面的媒体查询。