Alex Rivera | Logout

How to set the initial zoom/width for a webview

Asked 2010-09-27T23:02:08.990
80

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.

android webview width scale android-webview
Edit
Report

2 Answers

20

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

answered 2011-07-06T02:56:14.340
12

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.

answered 2013-02-05T11:04:39.763

Your Answer