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?
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:
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?
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.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
Thanks, I'll check that out. I'm on a MacBook Pro...