CODEWITHSUNDEEP
androidhtmlwebkitwidth
NoBugs
NoBugs

Reputation: 9496

Incorrect width in Android webkit browser

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?

Upvotes: 10

Views: 7666

Answers (3)

Sandeep
Sandeep

Reputation: 853

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

Upvotes: 10

Friz14
Friz14

Reputation: 278

use 

layout_width="fillparent"

:)

Upvotes: 0

NoBugs
NoBugs

Reputation: 9496

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

Upvotes: 1

Related Questions