media query is not working on ie10

Question

i made a responsive site and i'm using media queries in my css. everything is looking good on chrome and FF but ie10 is ignoring all my queries. i have <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> on the header because the site is set for tablets. i tried to delete the meta tag and it didn't solve the problem.

i tried almost everything:

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) 
@media only screen and (max-width: 800px)
@media screen and (max-width: 800px)
@media all and (max-width: 800px)
@media (max-width:800px) 

nothing seems to work.

Answer 1

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    }

Put your thing within this, the IE 10 hack unlike older version of IE. and use this within media queries

@-ms-viewport { width:device-width; zoom:1.0; }

Answer 2

It would be better if you had a JSFiddle or sample link to give a better example. Jaynath offers good advice. FWIW the viewport tag is ignored by IE, except on the phone. ViewPort is not an actual standard, it is an Apple convention that Android, Windows Phone, etc offers some support. The @viewport rule is an actual standard.

Answer 3

You may need @-ms-viewport { width:device-width; zoom:1.0; }