Fitting webpage contents inside a webview (Android)

Question

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.

Clothesline

can you now able to fit the page in webview – Commix

Did you get any solution? – Dorpat

Answer 1

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)

Clothesline

thanks, x.getSettings().setLoadWithOverviewMode(true); x.getSettings().setUseWideViewPort(true); worked for me – Irruption

Boom. Great answer. Exactly what I was after. Really appreciate your constant effort to provide a definitive solution to this problem! Reputation++ – Solanum

Answer 2

I've tried all methods above but in my case nothing worked until I found out:

   <meta name="viewport" content="user-scalable=no"/>

remove this line in the html file or simply change user-scalable=yes, and everything will be fine. Took me almost one day to find out this crazy line.

Teacher

Where can I change or add this? – Karame

It's meta tag in the html file. You can open that html file and edit it directly, in header part. – Teacher

awesome answer. saved me. ;-* – Noisome

can you help me on this ? #49098964 – Cattan

Answer 3

<WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" />

I checked my webview in xml layout file and saw it is having some fixed value for its width and height and then, I replaced those fixed values with "fill_parent" and it did work.

Emboss