Media Query Unlinking Ie8 Stylesheet

So I have a media query in my code that checks for device width. It works fine, just not in IE8 or lower obviously, as media queries are not supported. I am therefore trying to thr

Solution 1:

1. Move those media queries out into a CSS file (never put media queries inline).
2. Follow the format for standard device sizes. (http://css-tricks.com/snippets/css/media-queries-for-standard-devices/)

/* Smartphones (portrait and landscape) ----------- */@mediaonly screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */@mediaonly screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */@mediaonly screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */@mediaonly screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */@mediaonly screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */@mediaonly screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Solution 2:

I'm guessing that IE8 doesn't like two references to the same stylesheet. If this is the case, then you may be able to get away with add a dummy parameter to one of the references and having the browser see it as two separate stylesheet calls: <link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy">

Edit:

Change

<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="oldScreen.css"><![endif]-->

to

<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy"><![endif]-->