Why Does My Page Not Display In The Right Size On An Android Even With Viewport/Media Queries?

Question

Okay So the website in question is this:

Now if you notice on this website, the resolution of the white background div is 445px across y 686px long. It's also fluid so if you shrink it, it will appear different to accomdate different sizes. (if you are on a cell phone that has a smaller width than 400px, it will actually show different images).

Okay, but the point is here is that this page is not showing right on android devices as shown below.

That phone, along with all the other phones in that previewer that are 480px x 800px are displaying the website like that. The website, as you can see if you click on it, is a max of 686px tall, so why the heck isn't the whole page showing on this mobile device?

The size of that "playplanet" logo is actually 180px across and it almost fills up the whole width and the width of that phone is SUPPOSED to be 480px across.

Am I missing something here?

If you look at the source code, you'll see I added the following meta tags:

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

These are supposed to tell the android browser to display the page as the actual width of the device, so it should be telling it to make it show as 480px X 800px (samsung galaxy s 2 is 480px X 800px), but in reality if you look at the screenshot, it is actually displaying it as HALF that size since the logo is only 180px and its almost filled up the whole screen.

It should fit in there perfectly. The funny thing is actually my smaller than 400px width layout works perfectly on the smaller feature phone sizes (240 x 320 or vice versa), but this bigger one is causing me problems.

Answer 1

Have you tried target-densityDpi=device-dpi?

Quoting from this article: Android team has implemented a custom meta viewport property to allow you to customize browser scaling for high resolution (HDPI) screens. The CSS "px" unit may differ from a device's actual pixels, as the browser "scales" images and fonts to a larger size than you requested. Worse, it's using a non-integer scaling factor (e.g. 1.5x zoom, to scale 320px to 480px) which makes images look really weird.

Also, in this introduction to meta viewport the example below the section "Setting the target density" looks like your case.

Here is the updated meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">

Answer 2

The screenshot you are looking at is flawed. It is displaying your site at a 240px x 400px resolution that is typical of many of the standard LG and Samsung smartphones. The Galaxy [as you point out] obviously has a higher resolution then that. My suggestion would be to report the bug to the service that you are using and until they correct it, try using another similar phone to test with. Any other android phone with the right resolution should work, as webpages are pretty much displayed the same for every single android device sans the resolution and orientation.