Internet Explorer忽略@media屏幕

Question

i am working on responsive design for web page. I am loading some data with ajax to render forms. I can't find reason, why only internet explorer browser after rendering think, that width is lower than 768px(so it use my responsive template). It must run on ie9 and upper. Any idea, why only ie ignores @media or can be there another problem, why it doesn't work:

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

i try:

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

but still nothing.

Answer 1

Your Code Completely Work Fine. Check this url Diffrent Diffrent Browser . i also check it.

See Live Demo Here

Snippet Example

 @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> 

Internet Explore 11

FirFox