Question

在某些网络浏览器中，会自动调整大小的图像以适应屏幕。

是否可以在Android WebView中执行相同操作？

网页只包含图片，可能会添加一些JavaScript可以解决问题吗？有人已经这样做了吗？

注意：我事先并不知道图像的大小。

Answer 1

是的，这是可能的。您可以尝试使用以下代码设置WebView布局。它会将所有图像（大于Device Screen Width）的大小调整为屏幕宽度。这适用于两个方向（纵向和横向）

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

您可以稍后添加额外的边距/填充以使间距正确。

Answer 2

webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

有效但deprecated。这是没有LayoutAlgorithm.SINGLE_COLUMN的另一种解决方案，使用CSS：

@SuppressLint("NewApi")
private openWebView() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.TEXT_AUTOSIZING);
    } else {
        webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
    }
    String data = "<div> your HTML content </div>";
    webView.loadDataWithBaseURL("file:///android_asset/", getHtmlData(data), "text/html", "utf-8", null);
}

private String getHtmlData(String bodyHTML) {
    String head = "<head><style>img{max-width: 100%; width:auto; height: auto;}</style></head>";
    return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
}

Answer 3

你可以用这个：

WebView webView = (WebView) findViewById(R.id.myWebView);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

在此处找到此解决方案： How to set the initial zoom/width for a webview

Answer 4

您可以让浏览器调整图像大小以适合屏幕的最大宽度：

<img src="huge-image.jpg" width="100%" />

也可以将其高度调整为WebView的视口：

<img src="huge-image.jpg" height="100%" />

但是，调整宽度和高度都会导致图像拉伸。要根据哪一方最适合调整宽度或高度，您可以考虑使用一些JavaScript，如下所示：

<img src="huge-image.jpg" onload="resize(this);" />


<script type="text/javascript">

    function resize(image)
    {
        var differenceHeight = document.body.clientHeight - image.clientHeight;
        var differenceWidth  = document.body.clientWidth  - image.clientWidth;
        if (differenceHeight < 0) differenceHeight = differenceHeight * -1;
        if (differenceWidth  < 0) differenceWidth  = differenceWidth * -1;

        if (differenceHeight > differenceWidth)
        {
            image.style['height'] = document.body.clientHeight + 'px';
        }
        else
        {
            image.style['width'] = document.body.clientWidth + 'px';
        }

        // Optional: remove margins or compensate for offset.
        image.style['margin'] = 0;
        document.body.style['margin'] = 0;
    }

</script>

Answer 5

如果您的WebView宽度为fill_parent，则可以使用此代码：

Display display=getWindowManager().getDefaultDisplay();
int width=display.getWidth();
String data="<img src='http://example.com/image.jpg' style='width:"+width+"px' />";
webView.loadData(data, "text/html", "utf-8");

缩放仍在工作！

height为fill_parent的方法相同。

Answer 6

我遇到了同样的问题，并使用Jsoup来帮助我并添加所需的受尊敬的CSS。您可以轻松add attributes或CSS。以我为例，我从许多来源下载了各种不同的HTML文件，将它们保存，然后在Webview中显示。在使用Kotlin将HTML保存到数据库之前，下面是解析HTML的方法：

// Parse your HTML file or String with Jsoup
val doc = Jsoup.parse("<html>MY HTML STRING</html>")

// doc.select selects all tags in the the HTML document
doc.select("img").attr("width", "100%") // find all images and set with to 100%
doc.select("figure").attr("style", "width: 80%") // find all figures and set with to 80%
doc.select("iframe").attr("style", "width: 100%") // find all iframes and set with to 100%
// add more attributes or CSS to other HTML tags

val updatedHTMLString = doc.html()
// save to database or load it in your WebView

Add Jsoup to your project

玩得开心！

Answer 7

我的最爱：

String data = "<html><body ><img id=\"resizeImage\" src=\""+PictureURL+"\" width=\"100%\" alt=\"\" align=\"middle\" /></body></html>";  
webview.loadData(data, "text/html; charset=UTF-8", null);

Answer 8

您可以在请求参数中发送所需的大小，并让服务器为您设置img元素的宽度/高度。

Android的WebView可以自动调整大图像的大小吗？

8 个答案: