Android Webview - 使用一个 loadUrl 缩放图像以正确适合屏幕

Posted

技术标签:

【中文标题】Android Webview - 使用一个 loadUrl 缩放图像以正确适合屏幕【英文标题】:Android Webview - Scale image to fit screen properly with one loadUrl 【发布时间】:2016-01-05 04:21:42 【问题描述】:

在我的应用程序 webview 中,在首次加载时将文本 html 调整到屏幕上没有问题,但是当您尝试在启动活动后加载包含单个大图像作为第一页的页面时会出现问题。

如果您在 Activity 启动后加载任何类型的页面后尝试加载单个大图像的页面,则具有单个大图像的页面将毫无问题地适合屏幕。但是,如果您尝试在 Activity 启动后将带有单个大图像的页面作为第一页加载,它将显示一个带有小图像的页面,并且周围有很多空白区域。

有没有办法用一个 WebView#loadUrl 方法来适应 单个大图像的页面

这是我的带有单个大图像源的 html 页面

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Cover Title</title>
    </head>
    <body>
        <div id="cover">
            <svg xmlns="http://www.w3.org/2000/svg"  preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1125 1600"  xmlns:xlink="http://www.w3.org/1999/xlink">
                <image   xlink:href="../images/v01-cover.jpg" />
            </svg>
        </div>
    </body>
</html>

我已经尝试过设置 setLoadWithOverviewMode(true) 和 setUseWideViewPort(true),但没有成功。 阅读此链接中的 supermus 评论android WebView, Scaling Image to fit the screen

【问题讨论】:

html 是你的/可编辑的吗?上面的viewport 是什么? html 不可编辑,我没有放置任何视口元数据。 【参考方案1】:

如果您使用的是 WebView,则需要带有视口的元标记(这样,即使在加载和失败期间,它也可以使用像素值计算宽度等内容)。在文档的&lt;head&gt; 上添加&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;。这应该可以解决一些问题。

【讨论】:

更像是它可以帮助您在初始化 webview 后设置视口的宽度和高度【参考方案2】:

阅读 Bonatti 的回答后,我设法在活动开始后加载“适合屏幕”图像页面,方法是在设置 webview 时调用此函数以某种方式强制 webview 更新视口

private void setWebView() 
    mWebView = (WebView)findViewById(R.id.webview);
    String data = "<html><head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head></html>";
    mWebview.loadDataWithBaseURL(null, data, null, "UTF-8", null);

干杯。

更新

不要使用#loadUrl,而是将#loadDataWithBase64 与您的自定义ContentProvider 一起使用(以支持本地文件),因为您不需要编辑您的html,因为#loadDataWithBase 会立即使webview 端口适合屏幕,这与#loadUrl 不同加载文件/url时设置视口可能有一个小错误

【讨论】:

以上是关于Android Webview - 使用一个 loadUrl 缩放图像以正确适合屏幕的主要内容,如果未能解决你的问题,请参考以下文章

如何从 WebView 获取网页内容?

Android中webView的基础使用

Android WebView

android使用WebView里的js与android进行交互!

关于Android WebView的那些事

Android WebView使用深入浅出