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.