CODEWITHSUNDEEP
androidlayoutandroid-layoutwebviewstretch
OVERTONE
OVERTONE

Reputation: 12187

Fitting webpage contents inside a webview (Android)

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.

Upvotes: 31

Views: 51732

Answers (3)

user18033663
user18033663

Reputation: 11

<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.

Upvotes: 0

OVERTONE
OVERTONE

Reputation: 12187

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)

Upvotes: 105

Hoang Nguyen Huu
Hoang Nguyen Huu

Reputation: 1252

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.

Upvotes: 10

Related Questions