CODEWITHSUNDEEP
androidcssresponsive-design
SB2055
SB2055

Reputation: 12862

Responsive design not working on Android?

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?

Upvotes: 3

Views: 8194

Answers (4)

Jason Lydon
Jason Lydon

Reputation: 7180

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
    }

Upvotes: 5

Ryan Wheale
Ryan Wheale

Reputation: 28390

http://caniuse.com/#feat=calc

The version on Android you are using does not support calc and you must provide a fallback. I suggest something like this:

width: 90%; /* fallback */
width: calc(100% - 20px);

But now your pixel-based margin is not going to result in a centered layout. At that point, I suggest you just forget the "calc" altogether and use plain 'ol css:

width: 90%;
margin: 0 auto;

Upvotes: 1

Sergey Pekar
Sergey Pekar

Reputation: 8745

I used this code in header 

<meta name="viewport"
content="target-densitydpi=device-dpi,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

it worked for me

Upvotes: 0

15eme Doctor
15eme Doctor

Reputation: 375

Adroid phone like the nexus or Galaxy serie have a "retina desplay" mening the pixel ratio is 2 so you have to add this (-webkit-min-device-pixel-ratio: 2)

so

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio : 2)

Upvotes: 0

Related Questions