title: Responsive design not working on Android?
body: <p>I'm testing on both Nexus 4 - 4.1.1 - 768x1280 and Xperia Z - 4.2.2 - 1080x1920...  In both cases, my site (which is responsive on desktops) is only partially responsive in android phones.  WP8 works fine (surprisingly) - and iPhone 5 works - except the height is a little more than it should be (sticky footer isn't showing up).  It's as if the CSS thinks there's an extra 100px or so - things are just slightly cut off when they shouldn't be.  An example media query: </p>
  
  <pre><code>/* if device is less than 768px */
  @media (max-width: 768px) {
      .container{
          width: auto;
          max-width: calc(100% ~"-" 20px);
          margin-left: 10px;
      }
      .banner-info{
          padding-right: 15px;
          width: auto;
          max-width: 300px;
          font-size: 13px !important;
      }
  
  } 
  </code></pre>
  
  <p>In my header: </p>
  
  <pre><code>&lt;meta content="True" name="HandheldFriendly"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>What's going on here?</p>