14

I'm trying to create a mobile website for android. When I set the width of the body to 480px (the width of the screen) the result is about 50% larger than what I expect. It seems that android is scaling what it draws and messing up all my layouts. Does anyone know how to disable this, or work around it?

I'm already using this:

<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
Joren
  • 9,623
  • 19
  • 63
  • 104

2 Answers2

16

You're missing the secret new Android-only viewport property "target-densityDpi" which you can use to configure browser scaling. See the linked question for more details.

Community
  • 1
  • 1
Dan Fabulich
  • 37,506
  • 41
  • 139
  • 175
  • 1
    target-densitydpi is being depreciated, and no longer works in Chrome for Android. DIscussion here: http://stackoverflow.com/questions/11592015/support-for-target-densitydpi-is-removed-from-webkit – Jim Bergman May 22 '13 at 04:01
2

A device running Android does not necessarily have a screen width of 480 Pixel. Don't set a fixed width at all.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • I'm testing it on my droid, which does, and it reports it as 320 if I alert document width, no matter what I set the viewport width to. – Joren Apr 20 '10 at 08:20