2

I am working on a website to work on handhelds. I am using media queries. The browsers are recognizing the media query and are resizing the layout accordingly. But when i try to test the pagen on chrome emulator it is not recognizing the media queries and is showing the desktop version of the page. I have included the meta tag for viewport in my head tag

and my media query css is :-

@media only screen and (min-width: 481px) {
/*-----CONTENT -----*/

#mobileContentWrapper {
    display: none;
}
#desktopContentWrapper {
    display: block;
}

}
@media only screen and (max-width: 480px) {
/*-----CONTENT -----*/

#mobileContentWrapper {
    display: block;
}
#desktopContentWrapper {
    display: none;
}

}

Can anyone please guide me how can i resolve this issue. Really apprecaite any help.

user2719468
  • 21
  • 1
  • I'd rather use the media query `@media only screen {` placed before the first media query block. Anyway can you provide a fiddle? – morels Oct 30 '15 at 15:30
  • Why "only screen" and not "screen" ? – leuquim Oct 30 '15 at 15:43
  • I tried by putting screen instead of only screen but still no difference – user2719468 Oct 30 '15 at 16:20
  • Possible duplicate of [Chrome Device Mode Emulation Media Queries Not Working](http://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working) – BananaNeil Jun 01 '16 at 18:12

0 Answers0