media queries not working in chrome

Question

Hi I am implementing responsive design for a website. Although the design works alright in firefox, but it does not in chrome neither on PC nor mobile. The style sheet styles-RWD.css is this

    /*CSS FOR MOBILE DEVICES*/

@media screen and (min-width: 0px) and (max-width: 480px) {

 #sidebar {
  display : none;
 }

 footer {
  display : none;
 }
#bann_cb {
  display : none;
 }

body {
width:auto;
background-color:white;
font-family: sans-serif;
color:orange;
margin:0px 2px 2px 2px;
padding:0;
}
#header {
display : none;
}

#content {
width:50%;
padding:0px 2px 2px 2px;
}
#box_bharat {
display:none;
}

#form {
width:auto;
padding:none;

}
#menu-bar {
width:auto;
}

#news_10 {
display:none;
}
#mob_heading {
display:block;
width:auto;
visibility:visible;
}

}
/*end css for mobile devices*/

The default styles are after this.

The index.php has these lines

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="styles-rwd.css" />

Now this is working in firefox but not in chrome. In chrome it is not even triggering. I have tested on pc. when i reduce the size of browser window for firefox, the layout is triggered. But that does not happen for chrome. Same case on mobile device too. Kindly help.

Answer 1

// media screen only supports max-width 
@media screen and (max-width: 480px) {

}

Answer 2

Just for anyone stuck like I was about to have a stroke, make sure you're not mixing the meta tags, you have to use just one.

I had accidentally combined these two tags in my header:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta name="viewport" content="minimum-scale=1">

Removing the second meta tag seems to have fixed my issue with @media queries not working in chrome.

Answer 3

Chrome emulator always tries to render and scale down a 946px page into whatever sized screen it is emulating.The viewport tag tells the browser how it should try to render the page. width=device-width acts the way you would expect, while width=100px scales everything up.

To fix the issue, insert below meta tag in section

<meta name="viewport" content="width=device-width">