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

Posted 2023-03-06

【中文标题】Android webkit浏览器中的宽度不正确

【英文标题】：Incorrect width in Android webkit browser

【发布时间】：2011-09-21 14:20:50

【问题描述】：

我注意到 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 模拟器上测试过，它们都无法正确调整大小。看起来其他人已经注意到了这一点，请参阅here 和here。有人知道这个错误的好解决方法吗？

【问题讨论】：

删除width=100%后会发生什么？

在没有width=100%的Android浏览器上完全一样，可能不需要？它在我尝试过的所有桌面浏览器上都能正确显示，但在 Android 上却不行。

将宽度更改为 99% 不会产生任何明显差异。

这个例子似乎在 1.5 模拟器中工作得很好，很奇怪。这是 2.2 中引入的错误吗？

你能在声明 WebView 的地方发布你的 xml 吗？

【参考方案1】：

只需在你的 html 头标签中添加这个元标签。我已经用 android 2.1 浏览器检查过它，它在缩放时工作正常。

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

【讨论】：

这似乎工作得很好，但它不能让你像往常一样缩小。在默认缩放下，您可以放大，但不能缩小。

赞美你。这件事花了我一天一夜的时间才找到。

【参考方案2】：

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

webview.getSettings().setUseWideViewPort(false);

除非绝对必要，否则这将禁用水平滚动，并且 div 宽度和缩放按预期工作。显然，这仅适用于自定义 WebView，也许有一种更通用的方法可以使用 之类的方法？

【参考方案3】：

使用

layout_

:)

【讨论】：

如果 WebView 没有占据整个宽度，这可能会有所帮助，但这不是我的问题。这是 HTML 宽度的问题，甚至在默认浏览器应用中也会发生。