title: Meta viewport tag and css media queries
body: <p>I have a problem with CSS media queries using together with meta viewport tag.
  I am making iPad webapp that will work inside standalone view on home screen.</p>
  
  <p>This is the CSS:</p>
  
  <pre><code>.header_portrait {
  
      position: relative;
      top: 0px;
      left: 0px;
      background: #ccc;
      width: 1536px;
      height: 219px;
  
  }
  
  .header_landscape {
  
      position: relative;
      top: 0px;
      left: 0px;
      background: #fff;
      width: 1536px;
      height: 219px;
  
  }
  
  @media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
      .header_landscape { display: none; }
  }
  @media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
      .header_portrait { display: none; }
  }
  </code></pre>
  
  <p>This is part of HTML <code>&lt;head&gt;</code>:</p>
  
  <pre><code>&lt;meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" /&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  </code></pre>
  
  <p>This is part of HTML <code>&lt;body&gt;</code>:</p>
  
  <pre><code>&lt;div class="header_portrait" ontouchmove="togle_touch('disable');"&gt;
  
  &lt;/div&gt;
  &lt;div class="header_landscape" ontouchmove="togle_touch('disable');"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>If I remove meta viewport tag from head orientation detection works fine. 
  It seems that viewport mess up max-device-width so that CSS media query doesn't detect it as it should.</p>
  
  <p>Any help is greatly appreciated :)</p>