[android] How to set the initial zoom/width for a webview

I am trying to get the WebView to have similar behavior as the android browser. The browser opens all pages in a way that tries to fit their width to the screen. However, the default behavior of the WebView is to start at a 100% pixel scale so it starts zoomed in on the top left corner.

I have spent the last couple hours trying to find a way to get the WebView to scale the page to the screen like it does in the browser but I'm not having any luck. Has anyone found a way to accomplish this?

I see is a setting called setLoadWithOverviewMode, but that didn't appear to do anything at all. I also experimented with setInitialScale but on different screen sizes and web page sizes that won't be as graceful as the browsers scaling.

Any one have any leads?

Thanks

EDIT: Brian's method seems to work when the phone in landscape but not in portrait. In portrait it is close but still does not fit the whole screen in the page. I starting this bounty with the hope there is a sure-fire way to get the initial zoom to fit the page to the width of the page in any orientation or screen size.

This question is related to android webview width scale android-webview

The answer is


I figured out why the portrait view wasn't totally filling the viewport. At least in my case, it was because the scrollbar was always showing. In addition to the viewport code above, try adding this:

    browser.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    browser.setScrollbarFadingEnabled(false);

This causes the scrollbar to not take up layout space, and allows the webpage to fill the viewport.

Hope this helps


in Kotlin You can use,

webView.isScrollbarFadingEnabled = true
webView.setInitialScale(100)

It is and old question but let me add a detail just in case more people like me arrive here.

The excellent answer posted by Brian is not working for me in Jelly Bean. I have to add also:

browser.setInitialScale(30);

The parameter can be any percentage tha accomplishes that the resized content is smaller than the webview width. Then setUseWideViewPort(true) extends the content width to the maximum of the webview width.


//for images and swf videos use width as "100%" and height as "98%"

mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);

If you have the web view figured out but your images are still out of scale, the best solution I found (here) was simply prepending the document with:

<style>img{display: inline; height: auto; max-width: 100%;}</style>

As a result all images are scaled to match the web view width.


I'm working with loading images for this answer and I want them to be scaled to the device's width. I find that, for older phones with versions less than API 19 (KitKat), the behavior for Brian's answer isn't quite as I like it. It puts a lot of whitespace around some images on older phones, but works on my newer one. Here is my alternative, with help from this answer: Can Android's WebView automatically resize huge images? The layout algorithm SINGLE_COLUMN is deprecated, but it works and I feel like it is appropriate for working with older webviews.

WebSettings settings = webView.getSettings();

// Image set to width of device. (Must be done differently for API < 19 (kitkat))
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
    if (!settings.getLayoutAlgorithm().equals(WebSettings.LayoutAlgorithm.SINGLE_COLUMN))
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
} else {
    if (!settings.getLoadWithOverviewMode()) settings.setLoadWithOverviewMode(true);
    if (!settings.getUseWideViewPort()) settings.setUseWideViewPort(true);
}

Try using a wide viewport:

 webview.getSettings().setUseWideViewPort(true);

Examples related to android

Under what circumstances can I call findViewById with an Options Menu / Action Bar item? How to implement a simple scenario the OO way My eclipse won't open, i download the bundle pack it keeps saying error log getting " (1) no such column: _id10 " error java doesn't run if structure inside of onclick listener Cannot retrieve string(s) from preferences (settings) strange error in my Animation Drawable how to put image in a bundle and pass it to another activity FragmentActivity to Fragment A failure occurred while executing com.android.build.gradle.internal.tasks

Examples related to webview

Is `shouldOverrideUrlLoading` really deprecated? What can I use instead? Android Webview gives net::ERR_CACHE_MISS message Swift Open Link in Safari How to load html string in a webview? how to display progress while loading a url to webview in android? Download file inside WebView How to pass html string to webview on android how to get html content from a webview? Android webview slow Android WebView not loading an HTTPS URL

Examples related to width

How to Determine the Screen Height and Width in Flutter Change New Google Recaptcha (v2) Width How to get the <td> in HTML tables to fit content, and let a specific <td> fill in the rest Full width image with fixed height Width equal to content CSS to make table 100% of max-width CSS Input with width: 100% goes outside parent's bound HTML email in outlook table width issue - content is wider than the specified table width How to set up fixed width for <td>? How to make div's percentage width relative to parent div and not viewport

Examples related to scale

Plotting with ggplot2: "Error: Discrete value supplied to continuous scale" on categorical y-axis Understanding `scale` in R simple Jquery hover enlarge Adjusting the Xcode iPhone simulator scale and size How to scale Docker containers in production Scale the contents of a div by a percentage? Fit Image in ImageButton in Android Fit image into ImageView, keep aspect ratio and then resize ImageView to image dimensions? How can I shrink the drawable on a button? Auto Scale TextView Text to Fit within Bounds

Examples related to android-webview

WebView showing ERR_CLEARTEXT_NOT_PERMITTED although site is HTTPS Is `shouldOverrideUrlLoading` really deprecated? What can I use instead? Embed Youtube video inside an Android app Android WebView not loading URL Playing HTML5 video on fullscreen in android webview How to load html string in a webview? Android webview launches browser when calling loadurl Add custom headers to WebView resource requests - android Android WebView not loading an HTTPS URL How to load external webpage in WebView