Search code examples
internet-explorercssresponsive-designmedia-queries

What would cause a responsive site to default to mobile?

I have a site with a responsive grid system using media-queries with break points. On IE8 I've seen the "mobile version" as the default view even with the screen size set to what should be the standard desktop size (greater than 960px wide).

Is there a known issue (and fix) that would cause this to happen?

thanks for the help, as always.

---- edit ----

how my media query is setup:

@media screen and (max-width: 767px) {  }
Solution

  • IE8 doesn't support media queries, so probably it's processing all the CSS rules, even those a full-width screen shouldn't.

    To prevent this problem, add the only keyword after each @media rule ( @media only screen ... ).

    Then you can reach support including the fantastic plugin respond.js in the <head> section of all your pages