Fitting webpage contents inside a webview (Android)

OVERTONE picture OVERTONE · Jan 29, 2012 · Viewed 49.3k times · Source

Simple question.

I'm trying to stretch the contents of a webview so that the entire webpage within is visible. i.e no scrolling. I've looked through the docs but cant find any method asides from zoom controls and setinitialscale.

The problem with setinitialscale in this case is that it works differently for different sites.

Example: 1:wikipedia will load as expected with the zoom far enough out. 2:Google however will only show the center of the page.

Heres the code snippet I have

    test1 = (WebView) findViewById(R.id.webview_test_1);
    test2 = (WebView) findViewById(R.id.webview_test_2);
    test3 = (WebView) findViewById(R.id.webview_test_3);

    test1.getSettings().setJavaScriptEnabled(true);
    test2.getSettings().setJavaScriptEnabled(true);
    test3.getSettings().setJavaScriptEnabled(true);

    test1.setInitialScale(12);
    test2.setInitialScale(12);
    test3.setInitialScale(12);

    test1.loadUrl("http://developer.android.com/resources/tutorials/views/hello-tablelayout.html");
    test2.loadUrl("http://www.wikipedia.org/");
    test3.loadUrl("http://www.google.com");

test1.getSettings().setDefaultZoom(ZoomDensity.FAR);

This seems to be an alternative to what I'm trying to do but I cant get it to zoom far enough.

Answer

OVERTONE picture OVERTONE · Jan 29, 2012

So People can use this as a tutorial in the future.

There are a bunch of ways to handle zooms in android and fitting pages. It can be pretty temperamental at times and some methods work better than others.

For most people, Just use this:

WebView x;

x.setInitialScale(1);

This is the furtheset zoom possible. But for some sites it just looks pure UGLY.

This was the second version I found

test1.getSettings().setDefaultZoom(ZoomDensity.FAR);

Thats a nice all rounder than seems to just zoom out far enough for a lot but still not what I was looking for.

And now heres the final solution I have.

x.getSettings().setLoadWithOverviewMode(true);
x.getSettings().setUseWideViewPort(true);

Basically what these do is answered in another question like this.

 setLoadWithOverviewMode(true) 

Loads the WebView completely zoomed out

setUseWideViewPort(true)

Makes the Webview have a normal viewport (such as a normal desktop browser), while when false the webview will have a viewport constrained to it's own dimensions (so if the webview is 50px*50px the viewport will be the same size)