media query unlinking IE8 stylesheet

Question

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 throw IE8 a stylesheet (I figured I go with the one that is built for lower resolutions) but it seems that my media query (whether before or after the IE8 comment) stops IE8 from linking to any stylesheet at all.

Please could somebody inform me of a workaround? And is there a way to check for device width within the IE8 comment?

Here is my code;

<!DOCTYPE HTML>
     <html lang="en">
         <head>

             <meta charset="UTF-8">
             <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->


                 <link type="text/css" rel="stylesheet"  media="screen
    and (min-device-width:600px) and (max-device-width:1024px)" href="oldScreen.css">
                 <link type="text/css" rel="stylesheet"  
 media="screen   and (min-device-width:1025px)" href="home.css">

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

so you are saying that without javascript, you can never use a media query if your site might be opened in IE8? — DJC, Feb 18 '14 at 18:50

Skrivener · Answer 1 · 2014-02-18T19:14:24.697

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

to

score 0 · Answer 2 · answered Feb 18 '14 at 19:00

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

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

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

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

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

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

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

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

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

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

media query unlinking IE8 stylesheet

2 Answers2

Linked