Why android browser viewport is much smaller than actual screen size of the mobile phone, even when using width=device-width?

Question

I would like to ask why my HTC Desire HD's browser reports viewport's width of 369px even though the actual pixel size of the screen is 480x800 WVGA.

I am using in my page this CSS styles:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />

Can you please explain me this strange behaviour and how to force Android browser to actually set viewport's width to 480px rather than weird 369px ?

Thank you for any help.

Pastelist

Answer 1

A detailed explanation of the issue can be found in that blog post.

The number that you see (369px) is actually the size of the device multiplied by the default, assumed, screen density of 160 dpi.

In order to use the device screen density, you have to specify, in the viewport meta, that you want to use the device's dpi.

e.g.:

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

EDIT: The documentation of the WebView class now also has information about the target-densityDpi parameter, and the possible values.

Drakensberg

Thanks for great answer and explanation of the problem ! – Pastelist

this has solved something I couldn't figure out for about 4 hours now... thanks a lot :-) – Tomboy