Media type inside link not working for windows phone ( IE )

I'm trying to add media types in links so that different css files are loaded according to the screen width or height.

I added the following code in my index.html page

Code:

<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