Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Possible solution to the problem of Symbian browsers and IE8 & earlier not understanding media queries. (See http://www.quirksmode.org/blog/archives/2010/09/more_about_medi.html )
body {
// Basic styles
// (For mobile browsers that don't understand media queries)
}
@media all and (max-width: 600px) {
body {
// Extra styles for mobile
}
}
@media all and (min-width: 600px) {
body {
// Extra styles for desktop
}
}
<!-- Selects IEs 8 earlier, including IE6 Mobile -->
<!--[if lt IE 9 ]> <link rel="stylesheet" href="old-ies.css"> <![endif]-->
<!-- Then IE9, Windows Phone 7 and everyone else get the full stylesheet -->
<!--[if (gte IE 9)|IEMobile|!(IE)]><!--> <link rel="stylesheet" href="everyone-else.css"> <!--<![endif]-->
body {
// Desktop styles
// (This section for old desktop versions of IE)
// (It will also be read by IE6 Mobile)
}
@media handheld {
body {
// Reset styles
// (First we need to reset the desktop styles IE6 Mobile has just read...)
// Basic styles
// (...then set the basic styles we want IE6 Mobile to actually display)
}
}
@MatthewKBabbs

This comment has been minimized.

Copy link
Owner Author

@MatthewKBabbs MatthewKBabbs commented Sep 16, 2010

To a degree this approach revives the problem of maintaining a separate stylesheet for older versions of IE. However, it's not as bad as it might look - the IE stylesheet is simply a clone of the 'desktop' section of the main stylesheet (with any IE-specific fixes appended), so this wouldn't be hard to automate.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment