using the meta viewport tag for Browser on Android devices

I am developing a开发者_Python百科 mobile web site and it works great on mobile Safari. However, on Android devices, the web site is zoomed in too much, but only on some devices. I tried it on my friend's phone and he has the HTC Magic running Android 2.1 and it shows up ok, but it shows up zoomed in too much on the emulator using 2.1 and my phone which is the Motorola Backflip running Android 1.5. Any idea of why there is an inconsistency?

The link is: http://itphosting1.com/dtang/jarritos/

This is the meta viewport tag I am using:

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

I think it might have to do with resolution and screen size differences between devices. Not really sure how to solve that though...

How about changing it to something like

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />

I had a similar problem, but the solution was very dependent on the setup of the site I am working on. On Android 2.2 and below, the site wouldn't scale correctly to the device and media queries would respond to my zooming - zoom out, a wider width media query kicked in, zoom back in, and the lesser width media queries were applied.

For a solution, using <meta name="viewport" content="width=device-width, initial-scale=1"> was enough as far as the viewport meta tag is concerned for me. Then what I had to take into consideration was that the main container of the page had an explicit width set in the CSS. While this width would respond to the width of the viewport in other browsers, it wouldn't in this case. I could leave the explicitly declared width in the CSS, as long as I made sure that when the first media query kicked in, the main container would be set to a 100% width. So basically, using LESS syntax:

@containerWidth: 1080px;

#page {
    width: @containerWidth;
}

@media screen and (max-width: @containerWidth) {
    #page {
        width: 100%;
    }
}