Grow your CSS skills. Land your dream job.

Any Known Issues with ie9 and @media? – Desktop showing Mobile Version

  • # December 29, 2012 at 1:32 pm

    I’m testing a site that is CSS styled to render differently on mobile devices using @media definitions. Looks exactly as it should in multiple browsers and mobile devices. However, I noticed on Adobe Browser labs, that ie9 (not 7 or 8) is the one browser helping itself to the CSS intended only for mobile devices.

    This is the CSS that ie9 seems to be using on desktop when it should be ignoring it:

    @media only screen and (max-device-width: 1200px) {
    -lots of css here
    }

    I don’t actually have ie9, just what I can see using Adobe Browser Lab’s screenshot. Is there anything I don’t know about how ie9 reads “max-device-width”? Ideas?

    # December 29, 2012 at 1:36 pm

    Try just using @media (max-width: 1200px) {} see what happens. It could also be that their renderer has a max width below 1200px of course.

    # December 29, 2012 at 11:12 pm

    If you’re on Windows, you can use IETester to test various IE versions and your @media queries:

    http://www.my-debugbar.com/wiki/IETester/HomePage

    # December 31, 2012 at 11:27 am

    Thanks, I’ll check that out. I’m on a MacBook Pro…

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".