Incorrect width in Android webkit browser

Question

I noticed a problem on Android's default browser, where 100% width may actually go past the edge of the screen. Here's a minimal test case:

  <div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>&nbsp;</div>
  <div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>New & improved div</div>
  <div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>another working one</div>
  <div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>another</div>

This works as expected on a desktop browser, but in Android webkit browser, the first div goes way off the screen, and doesn't change width when zooming in and out. The divs after it work correctly.

Update: I've tested this on 2.3, 3.0, 3.1, and a newly created 2.2 emulator, they all fail to size it correctly. It looks like other people have noticed this, see here and here. Anyone know a good workaround for this bug?

Answer 1

Just add this meta tag inside your html head tag .I've checked it with android 2.1 browser and it works fine on zoom.

<meta name="viewport" content="width=device-width" />