The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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:

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed