title: CSS Media Query min-width not working correctly
body: <p>I have a HTML like:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Code: NewYork&lt;/title&gt;
      &lt;link rel="stylesheet" href="test.css" /&gt;
  &lt;/head&gt;
  &lt;body data-ng-app="us"&gt;
      &lt;input type="text" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my CSS is:</p>
  
  <pre><code>input {
    background-color: red;
  }
  /* ---- Desktop */
  @media only screen and (min-width: 1000px) and (max-width: 1200px) {
      input {
          background-color: green;
      } 
  }
  </code></pre>
  
  <p>now the CSS applies when the window is at 909px width. Obviously not a scrollbar problem. I am getting nuts with this simple problem. I tested it with Chrome and IE10 both the same.</p>
  
  <p>Can anybody please help what I am doing wrong here?</p>