Responsive design not working on Windows phone - css

Question

I am using responsive design for my site but the css media queries are not working for Windows Phone. I found a solution here http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ but still is not working for me.
I am using on my header file on html this:
<meta name="viewport" content="width=device-width, initial-scale=1">
then I add on the head this js:
<script type="text/javascript">
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("#-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>
before any other script and last on my css page I have:
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
#media only screen and (max-width: 599px) {
#-ms-viewport{
width:320px;
}
}
But still I cannot make it work. Does anyone have an idea what could be the problem?
Thanks in advance.

Answer 1

Try this media queries
/* 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 */
}