WebView 缩放不正确？

Question

我正在使用 WebView 将 HTML 转换为图像。 HTML 的固定宽度为 600px（使用 CSS 定义）。

WebView 布局为：

<WebView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none"/>

在加载 html 文档时，我通过以下方式获取 webview 大小：

int width = webView.getMeasuredWidth();
int height = webView.getMeasuredHeight();

我注意到的第一个奇怪的事情是宽度是 650。显示文档，我需要水平滚动才能查看所有内容（低分辨率设备）。

下一步是把webview转成图片：

bitmap = Bitmap.createBitmap(600, height, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bitmap);
webView.draw(c);

但是，将 webview 转换为位图会裁掉右侧部分（webview 中不可见的区域）。

为什么我在 HTML 文档中定义了 600 时 webview 宽度为 650？为什么图像被裁剪了？

Answer 1

首先请注意，HTML (CSS) 像素与屏幕像素不同。这是因为您可以缩放正在查看的页面——这不会影响其 CSS 尺寸（简单来说，HTML 布局不会 "notice" 缩放），但会发生变化您的 CSS 像素中有多少屏幕像素。

当您为屏幕上的 WebView 调用 WebView.draw() 时，它会根据 WebView 的当前大小绘制到 canvas 上——基本上，您在屏幕上看到的就是您所看到的将进入您的位图中。

因此，有两种方法可以满足您的需求：

使 WebView 宽度足够大以容纳您的页面。为此，您需要将 WebView 放在一个 ScrollView 中，并相应地设置 WebView 的宽度。
调整显示内容的大小使其适合屏幕。为此，您可以使用两个 WebView 设置：setUseWideViewport(true) 和 setLoadWithOverviewMode(true)，以及 <meta name="viewport"> HTML 标记中的 initial-scale 值。

WebView not scaling correctly?