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?

It's exactly the same on Android browser without width=100%, maybe not needed? It displays correctly on all desktop browsers I tried, but not Android. — NoBugs, Jun 23 '11 at 21:55
Changing width to 99% doesn't make any noticeable difference. — NoBugs, Jun 23 '11 at 22:00
This example seems to work perfectly fine in 1.5 emulator, weird. Is this a bug introduced in 2.2? — NoBugs, Jun 23 '11 at 22:12
This shouldn't be a problem with the xml layout, it happens in the default webkit browser. — NoBugs, Jul 05 '11 at 06:12
Can not reproduce your problem on Sumsang 2.3, and HTC 2.2. Can you post the whole html? — dongshengcn, Jul 08 '11 at 13:54
Just paste those four divs into a new .html file, try to zoom in on the mobile browser, and the first one will not resize correctly. — NoBugs, Jul 08 '11 at 17:19

Sandeep · Answer 1 · 2013-01-11T10:53:36.680

10

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" />

edited Jan 11 '13 at 10:53

answered Jul 05 '11 at 06:27

Sandeep

843
1
9
18

That seems to work well, but it doesn't let you zoom out as you normally could. At default zoom you can zoom in, but not zoom out. – NoBugs Jul 05 '11 at 06:57
1

praise to you. this thing took me a day and a night of trying until i found this. – Etienne678 Apr 05 '13 at 23:51

NoBugs · Accepted Answer · 2011-07-06T18:58:06.003

1

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" ...> ?

edited Jul 06 '11 at 18:58

answered Jul 06 '11 at 05:59

NoBugs

9,310
13
80
146

score 0 · Answer 3 · answered Jul 08 '11 at 08:09

0

use

layout_width="fillparent"

:)

answered Jul 08 '11 at 08:09

Friz14

278
3
11

That may be helpful if the WebView were not taking up the full width, but that's not my problem. This is a problem with the HTML width, and it even happens in the default browser app. – NoBugs Jul 08 '11 at 17:22

Incorrect width in Android webkit browser

3 Answers3

Linked