Android webkit浏览器宽度不正确

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:

我注意到Android的默认浏览器有一个问题，100%的宽度可能会超过屏幕的边缘。这里有一个最小的测试用例:

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

这在桌面浏览器上可以正常工作，但是在Android webkit浏览器中，第一个div会在屏幕外运行，并且在缩放时不会改变宽度。之后的歌剧效果很好。

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?

更新:我已经在2.3、3.0、3.1和一个新创建的2.2模拟器上测试过了，它们都没有正确的大小。看起来其他人已经注意到了，这里和这里。有人知道解决这个问题的好办法吗?

3 个解决方案

#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.

在你的html head标签中添加这个meta标签，我已经用android 2.1浏览器检查过了，它在zoom上运行得很好。

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

#2

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

在我的WebView中，我可以通过关闭宽视点来修正宽度。

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

除非绝对必要，否则禁止水平滚动，div宽度和缩放工作与预期一致。显然，这只适用于定制的WebView，也许有一种更通用的方法来实现这一点，比如吗?

#3

use

使用

layout_width="fillparent"

#1