Search code examples
cssinternet-exploreriphonemedia-queries

How do I apply desktop media queries style to IE?

I have two stylesheets, one should only apply to iPhone and other handhold devices

@media screen and max-device-width: 480px { ... }

and the other should only apply otherwise

@media screen and min-device-width: 481px { ... }

I currently put them in one large css file, in two different @media section mentioned above, but then I realized IE7/8 doesn't apply any of the sections.

What's the solution to the problem? The only solution I can Googled is to include the desktop stylesheet again in an IE conditional comment:

<!--[if lte IE 8]>
<link rel="stylesheet" href="/base.css" type="text/css" media="screen"/>
<![endif]-->

But the W3C website achieve the same effect without this. How?

Solution

  • Per comment above, it seems the only two viable solution are conditional comment or Javascript media attribute rewrite.