Responsive design not working on Android?

Question

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:

/* 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;
    }

} 

In my header:

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

What's going on here?

Answer 1

Try adding target-densityDpi=device-dpi to your meta viewport. It's an Android specific value.

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

UPDATE:

I recently found out that target-densityDpi is no longer supported. I solved a similar problem by combining -webkit-min-device-pixel-ratio with max-width while also not using target-densityDpi in my meta viewport:

    @media  all and (max-width:360px),
            screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px),
            screen and (-webkit-min-device-pixel-ratio: 2.0) and (max-width: 720px) {
        // CSS HERE
    }