Media type inside link not working in IE 10

I'm trying to add media types in links so that different css files are loaded according to the screen width or height. This is helpful if I want to support for windows phone also. 

I added the following code in my index.html page. This should check for the screen width and the file should be loaded according to that. 

<link type="text/css" rel="stylesheet" href="resources/css/app_phone.css" 
        media="only screen 
               and (max-width: 480px) 
               and (-webkit-max-device-pixel-ratio: 1)"><!-- Phone ~ Retina -->    <link type="text/css" rel="stylesheet" href="resources/css/app_phone_retina.css" 
        media="only screen 
               and (max-width: 480px) 
               and (-webkit-min-device-pixel-ratio: 1.1)">
.
.
.

This works well for chrome or android and IOS devices.
But when I try to use the same code for windows or on IE, it doesn't work.
Please help me resolve this.
Thanks