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: ```

New & improved div

another working one

another

``` 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?

Accepted Answer

In my WebView, I was able to fix the widths by turning off wide viewport.

```
webview.getSettings().setUseWideViewPort(false);
```

This disables horizontal scroll unless absolutely necessary, and div widths and zoom work as expected. Obviously this will only work with a custom WebView, maybe there is a more generic way to do this with something like <meta name="viewport" ...> ?

Incorrect width in Android webkit browser

Solution

Problem