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

Question

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

Nic*_*oul 30 android resize image webview

在某些Web浏览器中,巨大的图像会自动调整大小以适应屏幕.

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

网页只包含图片,也许添加一些JavaScript可以做到这一点？
有人已经这样做了吗？

注意:我事先并不知道图像的大小.

Answer 1

She*_*yar 66

是的,这是可能的.您可以尝试使用以下代码设置WebView布局.它会将所有图像(大于Device Screen Width)调整为屏幕宽度.这适用于两个方向(肖像和风景)

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

Run Code Online (Sandbox Code Playgroud)

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

所以.. Android 4.4通过杀死LayoutAlgorithm.SINGLE_COLUMN来杀死它.有人找到替代品吗？ (5认同)
我喜欢这个解决方案,但我发现SINGLE COLUMN已被弃用.如果有人知道原因,请指出. (4认同)
工作,在2.2.1,3.2和4.0.3上测试.`minSdkVersion ="8"``targetSdkVersion ="15"`和`android-support-v4.jar`.非常简单有效! (2认同)
@ m039 - 不推荐使用SINGLE_COLUMN,但这是不使用CSS的唯一方法.就YouTube视频而言,它们在我的设备上运行良好.(在Nexus 7(4.1)和Galaxy Nexus(4.0,4.1,4.2)上测试) (2认同)

Answer 2

Yai*_*lka 38

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

Run Code Online (Sandbox Code Playgroud)

有效,但已被弃用.这是没有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>";
}

Run Code Online (Sandbox Code Playgroud)

+1 确实`LayoutAlgorithm.SINGLE_COLUMN` 似乎已被弃用，因此Sheharyar 的解决方案变得不那么有吸引力... (2认同)
自动宽度/高度的额外css线在5.0 Lollipop上实现了神奇 (2认同)

Answer 3

小智 15

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

但是,调整宽度和高度都会导致图像拉伸.要根据哪一方最适合调整宽度或高度,您可以考虑使用一些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>

Run Code Online (Sandbox Code Playgroud)

这很好用,但它会导致缩放.知道任何解决方法吗？ (2认同)
如果[仅调整宽度]（http://stackoverflow.com/questions/3923610/fit-image-in-webview/24072099#24072099），则高度将按比例调整。 (2认同)

Answer 4

And*_*dyB 15

你可以用这个:

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

Run Code Online (Sandbox Code Playgroud)

在此处找到此解决方案: 如何设置webview的初始缩放/宽度

归档时间：	15 年，8 月前
查看次数：	36550 次
最近记录：	7 年，2 月前