Android Webview - Scale image to fit screen properly with one loadUrl

Question

In my app webview, there's no problem to fit text html to screen on first load but the problem occurs when you try to load a page that contains a single large image as the first page after you start an activity.

If you try to load a page with single large image after you load any type of page after the activity started, the page with single large image will fit to the screen with no problem. But, if you try to load the page with single large image as the first page after the activity started, it will display a page with small image with lots of white space around it.

Is there any way to fit the page with single large image with one WebView#loadUrl method?

This is my html page with single large image source

<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" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1125 1600" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
                <image height="1600" width="1125" xlink:href="../images/v01-cover.jpg" />
            </svg>
        </div>
    </body>
</html>

I already tried setting the setLoadWithOverviewMode(true) and setUseWideViewPort(true) but didn't work out for me.
Read supermus comment in this link Android WebView, Scaling Image to fit the screen

Is the html yours/edditable? What is the [viewport](https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag) on it? — Bonatti, Oct 07 '15 at 19:53
The html is not editable and I didn't put any viewport meta. — D13, Oct 07 '15 at 19:58

score 3 · Accepted Answer · answered Oct 07 '15 at 20:11

3

If you are using a WebView, a meta tag with the viewport is expect (this way, it can calculate stuff like width with pixel values, even during load and failures). Add <meta name="viewport" content="width=device-width, initial-scale=1"> on the <head> of your document. This should fix some issues.

answered Oct 07 '15 at 20:11

Bonatti

2,778
5
23
42

More like it helps you **setting the viewport's width and height** after initializing the webview – D13 Oct 07 '15 at 21:55

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

After reading Bonatti's answer, I managed to load a 'fit to screen' image page after the activity start by somehow forcing the webview to update viewport by calling this function when setting the 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);
}

Cheers.

UPDATE

Instead of using #loadUrl, use #loadDataWithBase64 with your custom ContentProvider(to support local file) because you don't need to edit your html since #loadDataWithBase will fit the webview port to the screen straight away unlike #loadUrl which most probably have a small mistake in setting the viewport when loading a file/url

Android Webview - Scale image to fit screen properly with one loadUrl

2 Answers2

UPDATE

Linked