media query doesn't pick up new browser size when changing device from portrait to landscape

Question

I'm trying to create a website that is "responsive". I found a tool called "resizemybrowser.com" which tells you what the size of the browser is. I've been using this information for my media queries inside my css.

What's curious is that when i navigate to this website, the browser width doesn't change when i rotate my device from portrait to landscape. The height property does show a different value, but the width is always 980px and I don't understand why.

Thank you.

EDIT 1:

I also tried to play around with the "outer" setting in the web tool "resizemybrowser.com". now, it does display different sizes for portrait as opposed to landscape mode. It returns 720 for portrait and 1280px for landscape on my galaxy s3. However, when I test out my media queries using these values, it's still picking up the media query for 720px for both landscape and portrait. Here's the css:

    @media only screen and (max-width: 720px) {        
.hero-unit {
  background: url("../img/1.jpg") 100% 100% no-repeat;
background-size: contain;
width: 20em;
height: 10em;
padding:0px;
    }

  @media only screen and (min-width:721px) and (max-width: 1280px) {        
.hero-unit {
    background: url("../img/2.jpg") 100% 100% no-repeat;
background-size: contain;
width: 26em;
height: 10em;
padding:0px;
    }

      h2 {
  font-size: 1.8em;
  line-height: 1em;
}

}

EDIT 2

I've tried adding the following line in my code but it didn't make a difference.

    <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />'

matshch matshch · Accepted Answer · 2012-11-09T19:20:33

I think you need to add

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

Compare results with this tag and without, see section Media queries. On my device, it works exactly as you want.

media query doesn't pick up new browser size when changing device from portrait to landscape

1 Answers