Media queries fail inside IE9 iframe

Question

I have the following media queries in my CSS:

@media screen and (min-width: 0px) and (max-width: 319px) {
    body {background-color:red;}
}

@media screen a         


        

Answer 1

You most likely aren't going to be able to fix this. Media Queries are based on viewport size and I imagine IE isn't treating the iFrame as a fully fledged viewport in this context.

Your best bet would most likely be to add a bit of JavaScript that detects the size and adds a class to the at the same thresholds you are using for your responsive design. This would also give you backwards compatibility with browsers that don't support media queries.