Android webkit浏览器中的宽度不正确

Question

我注意到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>

这在桌面浏览器上按预期工作,但在Android webkit浏览器中,第一个div离开屏幕,并且在放大和缩小时不会改变宽度.div正常工作后.

更新:我已经在2.3,3.0,3.1和一个新创建的2.2模拟器上测试了它们,它们都无法正确调整大小.看起来其他人已经注意到这一点,看到这里 和这里.有人知道这个bug的好方法吗？

Answer 1

只需在你的html head标签中添加这个元标记.我已经用android 2.1浏览器检查了它,它在缩放时工作正常.

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

Answer 2

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

webview.getSettings().setUseWideViewPort(false);

除非绝对必要，否则这会禁用水平滚动，并且 div 宽度和缩放按预期工作。显然这仅适用于自定义 WebView，也许有一种更通用的方法可以使用 <meta name="viewport" ...> 之类的东西来做到这一点？