Responsive Design - Android not Scaling - php

Question

The responsive design I'm working through has presented another problem. To keep it simple, I set the body to snap down to 480px if the screen size or device size is less than 750px. Then, ideally, the screen on any device should scale to fit the width.
After some help here already today, I added the viewport meta, so now the CSS is responding to both my iPhone and Android, as well as the desktop browser when minimized.
The iPhone looks great; it zooms to the width, so even though the webpage is approx 480px, it fits perfectly into my 320px iPhone screen.
However, on the Android, it's zoomed in too far. About 25%-30% of the right side is off the screen and I have to scroll over to see it. If I pinch-to-zoom-out just a bit, then the window fits the screen width-wise and it looks fine. I don't know why I have to manually zoom out though.
Why is the Android not zooming out to the width of the page when the page is loaded?
My meta tag looks like this:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
My CSS looks like this:
#media all and (max-device-width: 750px), all and (max-width: 750px) {
body {max-width:480px;}
#container {
width: 90%;
margin: 0px auto;
padding: 0px;
min-width:480px;
}
#rightnav {display:none;}
}

Answer 1

if you're planning to display a 480px layout on a 320px screen you obviously have to zoom, so this works exactly as specified, but the iphone "smartly" ignores some rules to display it fullscreen.
you can set the initial-scale value to 0.75 to force every device to keep that zoom level in the beginning. of course the better solution would be to have yet another media query to scale down the screen contents even more on 320px devices.