javascript - Internet Explorer 忽略@media 屏幕

Question

我正在为网页设计响应式设计。我正在使用 ajax 加载一些数据来呈现表单。我找不到原因，为什么只有 Internet Explorer 浏览器在渲染后认为宽度低于 768px(所以它使用我的响应模板)。它必须在 ie9 及更高版本上运行。任何想法，为什么只有 ie 忽略 @media 或者可能有另一个问题，为什么它不起作用:

@media only screen and (max-width:767px){   
#topmenu-responsive{
width: 80%;
}
}

我尝试:

<meta http-equiv="X-UA-Compatible" content="IE=edge,9,10,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

但仍然没有。

Answer 1

您的代码完全可以正常工作。检查这个 url Diffrent Diffrent Browser 。我也查了一下。

查看现场演示 Here

片段示例

@media only screen and (max-width:767px){   
#topmenu-responsive{
width: 80%;
background:red;
border:1px solid black;
}
}

<meta http-equiv="X-UA-Compatible" content="IE=edge,9,10,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
<div id="topmenu-responsive">
topmenu-responsive Div
</div>

互联网探索 11

火狐