媒體查詢被收藏

Question

觸發我使用的fancybox 2，並有mediaquery它看起來像這樣：

@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中觸發媒體查詢。